JavaScript 事件（上）

最新推荐文章于 2022-04-20 16:39:49 发布

MaiOvv

最新推荐文章于 2022-04-20 16:39:49 发布

阅读量573

点赞数

分类专栏： JavaScript 文章标签： JavaScript DOM 事件

本文链接：https://blog.csdn.net/weixin_43960657/article/details/89077221

版权

JavaScript 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

JavaScript 事件

一、基本概念

1、事件：JS通过事件与HTML交互

2、事件流：描述的是从页面中接收事件的顺序，IE是事件冒泡流，其他是事件捕获流

3、事件冒泡：从最底层的节点逐级向上传播，DOM2级规范的，如：div → body → html → document

4、事件捕获：与冒泡相反的顺序

5、DOM事件流：包括三阶段，事件捕获、处于目标和时间冒泡阶段

二、事件处理程序

1、HTML事件处理程序

HTML特性名与事件处理程序名相同，而特性值则为JS代码，如

<input type="button" onclick="alert('Clicked')"/>   //事件名：onclick

注意：特性值，即JS执行代码（或调用函数），需要使用转义过后的HTML语法字符，例如： " → "

通过event变量（事件对象）可以访问事件本身

this.value等于标签名

然而，在HTML中指定事件处理程序有两个缺点：

1）时差问题：HTML一出现，JS代码还没解析前就触发事件则会报错，可将程序封装在try-catch中

<input type="button" onclick="try{show Message();}cahtch(ex){}"> //捕获错误，用户看不见报错

2)作用域在不同浏览器中不同，所以HTML事件处理程序不常用

2、DOM0级事件处理程序

事件处理程序被认为是元素的方法，因此作用于为元素。

创建事件处理程序的方法是：将一个函数赋值给一个事件处理程序属性

btn.onclick = function(){alert(this.id);}  //创建事件处理程序，this指向btn

3、DOM2级事件处理程序

两个方法，用于指定和删除事件处理程序：addEventListener()和removeEventListener();

这两个方法接收3个参数：①事件名 ②函数 ③布尔值：true捕获阶段调用，flase冒泡阶段

btn.addEventListener("click",function(){
    alert(this.id);
},flase);

一个元素可以添加多个事件处理程序，按照代码顺序触发

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除，注意参数要相同（匿名函数无法删除）

4、IE事件处理程序

attachEvent()和detachEvent()方法，只支持冒泡，在全局作用域下。他们有两个参数：①事件处理程序名 ②程序函数

可以使用attachEvent()为元素添加多个程序，但执行顺序和DOM2的相反

使用detachEvent()方法删除attachEvent()添加的事件，注意参数要一样

三、事件处理对象event

在触发某个事件时会产生一个对象event，包含着所有与事件有关的信息。

1、DOM中的event对象（蓝色为对应的IE中的event）

event对象在事件处理程序执行时存在，执行完被销毁

event.type属性：返回没有“on”作为前缀的事件名，例如"click"。可使用type通过一个函数处理多个事件。

currentTarget属性：返回事件监听器触发该事件的元素，即当前处理该事件的元素

target属性：返回触发该事件的节点（srcElement：目标）

eventPhase属性：返回事件传播的当前阶段

preventDefault()方法：删除事件的默认行为（cancelable属性设置为true时才行）（returnValue:为flase取消默认设置）

stopPropagation()方法：取消进一步的事件捕获或冒泡。1捕获阶段，2处于目标对象上，3冒泡阶段。(cancelBubble：为true取消冒泡)

2、设置跨浏览器兼容的event

var EventUtil = {
    addHandler:function(element,type,handler){
     //添加句柄
},

    getEvent:function(event){
        return event ? event : window.event;   //DOM或者IE的获取event对象
},

    getTarget:function(event){
        return event.target || event.srcElement;    //DOM或者IE的获取目标
},

    preventDefault:function(event){    //取消默认
        if(event.preventDefault){
            event.preventDefault();    
        }else{
            event.returnValue = false;
    }
},

        removeHandler:function(element,type,handler){    
            //删除句柄
},

    stopPropagation:function(event){    //停止在事件流的传播
        if(event.stopPropagation){
             event.stopPropagation();
        }else{
            event.cancleBubble=true;
        }
    }
}

四、事件类型

DOM3级分成以下几类事件：① UI事件② 焦点事件 ③滚轮事件 ④文本事件（输入文本） ⑤键盘事件 ⑥合成事件（输入法）

1、UI事件

1、load事件

window.load：页面完全加载完后触发，有两种定义load的方式

1）通过JS定义load

EventUtil.addHandler(window,"load",function(event){   //使用JS定义load
    alert("Loaded!");
});

2)通过给body标签添加onload特性来定义load（虽然可通过在body上定义所有window上发生的事件，但建议使用JS方法）

<body onload="alert('Loaded！')">       </body>

图像触发load事件

图像完全加载完后会触发事件

<img src="1.gif" onload="alert('Image loaded.')">

2、unload事件

unload事件在文档被完全卸载后触发（比如切换页面），常用于清除引用

EventUtil.addHandler(window,"unload",function(event){    //使用JS定义unload
    alert("Unloaded");
});

<body onunload="alert('Unloaded!')">      </body>     //通过THML添加unload

3、resize事件

当浏览器的高宽改变时，就会触发resize事件,IE等浏览器在窗口调整时就触发，而火狐则是停止调整时触发。

EventUtil.addHandler(window,"resize",function(event){    //通过JS定义resize
    alert("Resized");
})

4、scroll事件

可通过<body>元素的scrollLeft 和scrollTop来监控，当页面发生滚动时就触发

2、焦点事件

在页面获得或失去焦点时触发，可配合document.hasFocus()和document.activeElement使用，有以下四个焦点事件：

blur——失去焦点触发，不冒泡

focus——获得焦点触发，不冒泡

focusin——获得焦点触发，冒泡

focusout——失去焦点触发，冒泡

当焦点从页面中的一个元素移到另一个元素时，依次触发以下事件：focusout → focusin → blur → focus

3、鼠标与滚动事件

click——单击左键触发 dblclick——双击左键 mousedown——任意鼠标触发 mouseenter——光标首次移动到元素内时触发

mouseleave——光标移出范围触发 mousemove——鼠标在范围内移动触发 mouseup——释放鼠标按键时触发

1、客户区坐标位置：clientX和clientY属性：事件发生时鼠标指针在视口中的坐标

2、页面坐标位置：pageX和pageY属性，事件发生时鼠标指针在网页内容页面中的坐标

3、屏幕坐标位置：screenX和screenY属性，相对于整个电脑屏幕的位置

4、修改键：Shift、Ctrl、Alt、Meta。对应DOM的修改键的状态属性，按下即为true，否则flase：shiftKey、ctrlKey、 altKey和metaKey

5、相关元素：mouseout——鼠标移出触发 mouseover——首次移入元素内触发 relatedTarget属性提供相关元素的信息

6、鼠标按钮：event对象的button属性，表示按下或释放的按钮

DOM中有3个值：：0：左键 1：鼠标滚轮 2：鼠标右键

IE中有8个值： 0：没有按 1：左键 2：右键 3：同时按左右键 4：滚轮键 5：左中一起 6：中右一起 7：三键一起

7、鼠标滚轮事件：mousewheel，而有关鼠标滚轮的信息则保存在detail属性

4、键盘与文本事件

keydown——按下键盘的任意键时触发

keypress——按下能够插入或删除字符的键都会触发keypress事件

keyup——释放键时触发

textInput——文本事件：可编辑区输入实际字符时才能触发

inputMethod属性：表示把文本输入到文本框中的方式：

1：键盘输入 2：粘贴 3：拖放进来 4：使用IME输入 5：表单中选择 6：手写输入 7：语音输入 8：组合输入 9：脚本输入

MaiOvv

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 事件（上）

JavaScript 事件一、基本概念1、事件：JS通过事件与HTML交互2、事件流：描述的是从页面中接收事件的顺序，IE是事件冒泡流，其他是事件捕获流3、事件冒泡：从最底层的节点逐级向上传播，DOM2级规范的，如：div → body → html → document4、事件捕获：与冒泡相反的顺序5、DOM事件流：包括三阶段，事件捕获、处于目标和时间冒泡阶段二、事件...
复制链接

扫一扫

专栏目录