事件和event对象

1. 鼠标事件

事件: 系统中提供给我们的函数,这个函数会在某个动作发生的时候出发
函数中要做的内容是由我们决定的。

1.1 鼠标事件:

  • onclick 鼠标点击事件
  • ondbclick 鼠标双击事件
  • onmousedown 鼠标按下事件
  • onmouseup 鼠标抬起事件
  • onmousemove 鼠标移动事件
  • onmouseover 鼠标移入事件
  • onmouseout 鼠标移出事件
  • onmouseenter 鼠标进入事件
  • onmouseleave 鼠标离开事件、

onmousemove事件是只要鼠标移动就会触发,这个触发的频率与浏览器和BIOS有关

1.2 onmouseover/onmouseout与onmouseenter/onmouseleave的区别

onmouseoveronmouseout事件中如果触发元素下面有子元素的话,会发生事件传递,也就是会把自己的事件传递个子级。

onmouseenter/onmouseleave 事件里如果有子级元素的话,事件不会被传递。

2.焦点事件

2.1 onfocus

onfocus 当有焦点元素获取到焦点的时候会出发,使用tab键也会出发这个事件
支持onfocus事件的对象有:button, checkbox, fileUpload, layer , frame , password , radio , reset , select , submit , text , textarea , window

2.2 onblur

onblur 当有焦点的元素失去焦点的时候会出发

tabindex属性可以设置tab键点击时焦点切换的顺序

2.3 设置焦点

  1. focus()
    元素有焦点时可以使用这个方法
    作用: 让这个元素获取到焦点

  2. blur()
    元素有焦点的时候可以使用跟这个方法
    作用:让这个元素失去焦点

3. 键盘事件

键盘事件是当键盘按下的时候会出发的事件

3.1 onkeydown

onkeydown事件会在键盘按下的时候出发,如果键盘没有抬起,那么会一直触发。

如果键盘按下没有抬起,那么onkeydown事件会一直触发,但是第一次事件出发后与第二次事件触发前有一个微小的间隔,这个间隔是由于主板设定导致的(类似在输入法里长按一个字母键的效果)

3.2 onkeyup

onkeyup事件会在键盘抬起的时候触发。如果需要使用键盘事件但是又不希望事件连续触发,那么可以使用onkeyup

3.3 onkeypress

onkeypress事件会在键盘按下非功能键时触发(数字和字母键),如果摁下的是上下左右、ctrlaltshift之类的功能键,这个事件是不会被触发的。

4. select()

选中表单里的内容
如果挺尸出现多个select(),那么只会只会选中最后一个

window.onload=function(){
    var text=document.getElementById("text");
    var textArea=document.getElementById("textArea");
    var btn=document.getElementById("btn");
                
    btn.onclick=function(){
        text.select();
        textArea.select();      //这里点击按钮的时候,textarea会被选中。
    };
};

5.event 事件对象

event对象记录了在事件触发时的一些详细信息,例如鼠标位置,键盘按键,触发事件的元素等。

一个事件发生的时候,这个事件可能会是鼠标事件也可能是键盘事件,所以说,事件对象是不同的。

事件对象是事件处理函数中的第一个参数

注意:event有兼容性问题,在IE和chrome下可以直接使用event,在firefox下需要使用参数

document.onclick = function(ev){        
    var ev = ev || event ;           //可以使用这种方法来做兼容处理
}

6. event.cilentX / event.clientY

6.1 event.cilentX

鼠标在X轴上的位置,相对于可视区域左侧的距离

6.2 event.clientY

鼠标在Y轴上的位置,相对于可视区域顶部的距离

document.onmousemove = function(ev){
    var ev = ev || event;
    console.log(ev.clientX,ev.clientY);
}

7.target 事件源对象

在鼠标事件出发时,指向出发该事件的目标。

它找到的是触发这个事件的最里层的元素,它会一层一层往里面找,直到找到最里层的元素,但是鼠标点击的时候,鼠标的位置必需在这个最里层元素身上

target可以用在事件代理/事件委托

window.onload = function () {
        var list = document.getElementById("list");
        var lis = list.getElementsByTagName("li");
        //一般我们需要给所有的li加上事件会使用for循环

        for(var i=0; i<lis.length; i++){
            lis[i].onclick = function () {
                this.style.background = "red";
            }
        }
        //但是用for循环的时候,如果再使用innerHTML添加了新内容,那么所有事件都会被清空
        //list.innerHTML+= "<li>Glod</li>"; 
        //因为innerHTLM会首先清空所有的内容,然后在重新添加。

        // 当我们使用事件委托的时候,就不存在这种顾虑了
        list.onclick = function (ev) {
            ev = ev || event;
            ev.target.style.background = "red";
        };
        //这时,事件是给list添加的,list里面添加内容与list本身无关,所以无论list的子级做什么改动,都能继续触发这个事件
        //触发事件的是点击的最里层的元素
        list.innerHTML+= "<li>Glod</li>";


    }

8. 键盘事件对象

当键盘事件被出发的时候,会产生一个键盘事件相关信息的对象。

8.1 event.keyCode

返回键盘摁下的那个键对应的unicode码
鼠标点击时,也有这个事件

8.2 event.ctrlKey

事件触发时,判断ctrl是否被摁下,返回truefalse

8.3 event.shiftKey

事件触发时,判断shift是否被摁下,返回truefalse

8.4 event.altKey

事件触发时,判断alt是否被摁下,返回truefalse

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,744评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,505评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,105评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,242评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,269评论 6 389
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,215评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,096评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,939评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,354评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,573评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,745评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,448评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,048评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,683评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,838评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,776评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,652评论 2 354

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,490评论 1 11
  • 本篇博客源地址 总结: 鼠标事件 1.click与dbclick事件ele.click()ele.click(ha...
    ZombieBrandg阅读 674评论 0 1
  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 1,605评论 2 10
  • JavaScript 与 HTML 间通过事件实现交互。事件——文档或浏览器窗口中发生的一些特定的交互瞬间,即用户...
    sylvia_yue阅读 466评论 0 0
  • 本节介绍各种常见的浏览器事件。 鼠标事件 鼠标事件指与鼠标相关的事件,主要有以下一些。 click 事件,dblc...
    许先生__阅读 2,432评论 0 4