给元素添加事件,称为注册事件或者绑定事件
注册事件有二种方式:传统方法和方法监听注册事件。
传统注册方式:
on开头的事件onclick
特点:注册事件的唯一性,同一个元素同一个事件只能设置一个处理函数,否则后面的会把前面的覆盖掉。
方法监听事件:
addEventListener();IE9之前不支持此方法,要用attachEvent()代替。
特点:同一个元素同一个事件可以注册多个监听器。按注册顺序执行。不会出现前面被后面的方法覆盖掉。
删除事件的方式:
传统方式:
eventTarget.onclick = null;
监听注册方式:
removeEventListener(type,listener[,useCapture])
IE9之前删除监听事件:detachEvent();
DOM事件流分为3个阶段:
1.捕获对象
2.当前目标阶段
3.冒泡阶段
事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到DOM最顶层节点的过程。
事件捕获:由DOM最顶层节点开始,然后逐级向下传播到具体元素接收的过程。
onclick和attachEvent只能得到冒泡阶段。
addEventListener(type,listener[, uesCapture]) 第三个参数如果是true,表示在事件捕获阶段调用事件处理程序,如果为false,表示在冒泡阶段处理程序。
onblur onfocus onmouseenter onmouseleave 这些没有冒泡事件。
event事件对象。简写为e,但IE678不兼容,可以加上这句话:e = e || window.e window.e IE678兼容。写在方法参数的位置上,不需要传递参数。
e.target与this的区别:
e.target是你点击哪个对象,返回那个对象。而this返回的对象是你绑定的function那个对象。
与this相似的currentTarget,但有兼容性问题 IE678不支持。
事件委托:
也称事件代理。
原理:不用给每个字节点单独设置事件监听器,而是事件监听器·设置在父节点上,利用冒泡原理影响子节点。
作用:
只操作了一次DOM,提高程序的性能。
鼠标事件:
contextmenu:主要控制何时显示上下文菜单,主要用于程序员取消默认上下文菜单。可以用于取消鼠标右键菜单。可以防止文本被复制。
selectstart:开始选中。
clientX clientY 鼠标在可视区里的X,Y的坐标。
mousemove:鼠标移动属性。
键盘触发事件:
上面三个事件执行的顺序:down – press – ubibi
keyCode:可以得到相应键的ASCII的值。keyup 和 keydown 不区分按键对应字母的大小写,比如都是按键a,大小写返回相同的ASCII值。要想得到大小写不同的ASCII值,用可以keypress.
搜索框获得焦点:JS的方法focus();
keydown 和 keypress 在文本框里面的特点:事件触发时,文字还没写入文本框中。用keyup可以解决这个问题。