事件

所谓事件就是是浏览器告知JavaScript程序用户的行为

事件的属性

HTML页面元素提供的事件属性

HTML页面元素提供的事件属性 -> 元素的属性分类之一
- DOM提供了一系列的事件名称

示例代码:

DOM对象提供的事件属性

DOM对象可以设置事件属性

示例代码:

事件监听器

DOM对象提供的事件属性 - 无法同时为一个指定元素绑定相同事件多次

事件监听器也可以设置事件属性

注意: 该方法有浏览器兼容问题

示例代码:

浏览器兼容解决方案

示例代码:

事件监听器的浏览器兼容问题(IE 8以下版本浏览器不支持)        attachEvent(eventName,functionName)方法        * 参数          * eventName - 表示事件名称(注意:必须有on)          * functionName - 表示事件的处理函数     */    btn.attachEvent('onclick',function(){        console.log('xxxx...');    });    // 提供浏览器兼容解决方案    function bind(element, eventName, functionName){        if (element.addEventListener) {            element.addEventListener(eventName, functionName);        } else {            element.attachEvent('on' + eventName, functionName);        }    }

移除注册事件

removeEventListener(eventName,functionName)方法
- 表示对已经绑定的事件进行移除
- 参数:
  - eventName - 表示要移除的事件名称
  - functionName - 表示事件的处理函数
    - 必须是注册事件的处理函数(就是必须是同一个函数)

示例代码:

解决浏览器兼容问题

示例代码:

IE 8以下的版本浏览器不支持removeEventListener方法()          * detachEvent(eventName,functionName)            * eventName - 表示移除的事件名称(必须有on)            * functionName - 表示事件处理函数              * 必须是注册事件的处理函数(就是必须是同一个函数)     */    function unbind(element,eventName,functionName) {        if (element.removeEventListener) {            element.removeEventListener(eventName,functionName);        }else {            element.detachEvent('on' + eventName,functionName);        }    }

事件对象

Event事件对象 - 作为所有事件对象的父级
- MouseEvent事件对象 - 表示鼠标事件
- KeyboardEvent事件对象 - 表示键盘事件
- TouchEvent事件对象 - 表示触摸事件

示例代码:

解决浏览器兼容问题

示例代码:

// IE 8以下版本浏览器提供的添加事件监听器方法 - 事件对象是作为window对象属性出现    btn.attachEvent('onclick',function () {        console.log(window.event);    });    function bind(element, eventName, functionName){        if (element.addEventListener) {            element.addEventListener(eventName, functionName);        } else {            element.attachEvent('on' + eventName, function(){                functionName.call(element);            });        }    }    bind(btn,'click',function(event){        var e = event || window.event;    });    /*btn.onclick = function(event){        console.log(event);    }*/    function myClick(event){        console.log(event);    }