DOM事件(JS事件)

最新推荐文章于 2023-11-13 19:18:32 发布

润田原来是纯净水

最新推荐文章于 2023-11-13 19:18:32 发布

阅读量317

点赞数

分类专栏：前端技能文章标签： javascript

本文链接：https://blog.csdn.net/qq_14962167/article/details/52983338

版权

前端技能专栏收录该内容

4 篇文章 0 订阅

订阅专栏

事件流

描述的是从页面中接受事件的程序。

IE浏览器：事件冒泡流
其他浏览器(N):事件捕获流
1、事件冒泡：
即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上传播至最不具体的那个节点(文档).

比如：在html页面中有一个按钮，点击这个按钮的时候，有以下情况。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="按钮" onclick="javascript:alert('被点击了')">
</body>
</html>

事件接收的顺序为：input–>body–>html–>浏览器窗口

2、事件捕获：

不太具体的节点应该是更早接收到事件，而最具体的节点最后接收到事件。

在上面的例子中，事件捕获的事件接收顺序为：
浏览器窗口–>html–>body–>input

事件处理程序

1、HTML事件处理程序

事件是直接加在HTML语句结构上的。
栗子：

<input type="button" value="按钮" onclick="alert('HTML事件处理程序')">
或者
<input type="button" value="按钮" onclick="showAlert()">
<script type="text/javascript">
    function showAlert() {
        alert('HTML事件处理程序')
    }
</script>

缺点：

HTML事件的缺点：HTML和JS代码紧密的耦合在一起

2、DOM 0级事件处理程序

较为传统的方式：把一个函数复制给一个事件的处理程序属性
(用的较多的一种方法，原因是简单，具有跨浏览器的优势)
栗子实现：

<input type="button" value="按钮" id="btn">

<script type="text/javascript">
    function showMsg() {
        alert("我是DOM 0级事件处理程序。");
    }
    var btn=document.getElementById("btn");
    /*添加点击事件*/
    btn.onclick=function () {
        showMsg();
    }
    /*还可以移除事件*/
      btn.onclick=null;
</script>

3、DOM 2级事件处理程序
DOM2级事件定义了两个方法：

用于处理指定和删除事件处理程序的操作
btn.addEventListener()和btn.removeEventListener()
接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值
。
布尔值true和false，true表示捕获阶段调用处理程序，false表示事件冒泡阶段调用处理程序

栗子：

<input type="button" value="按钮1"id="btn1">

<script type="text/javascript">
    function showMsg() {
        alert("我是DOM 2级事件处理程序。");
    }
 var btn1=document.getElementById("btn1");
    /*DOM 2级添加事件*/
    btn1.addEventListener('click'//这里不加前面的“on”
            ,showMsg,false);
    /*删除事件*/
    btn1.removeEventListener('click',showMsg,false);
</script>

4、IE事件处理程序，以及跨浏览器解决

提供类似DOM事件的两个方法：
btn1.attachEvent()/添加事件/
btn1.detachEvent()/删除事件/
接收相同的两个参数：事件处理程序的名称，和事件处理程序的函数

栗子：

<input type="button" value="按钮1"id="btn1">

<script type="text/javascript">
    function showMsg() {
        alert("我是IE浏览器级事件处理程序。");

> 支持IE事件处理程序的浏览器：IE和OPERA


    }
 var btn1=document.getElementById("btn1");
    btn1.attachEvent('onclick',showMsg);/*添加点击事件*/
    btn1.detachEvent('onclick',showMsg);/*移除事件*/
</script>

跨浏览器事件处理程序
原则是：针对不同浏览器支持，采用不同方法处理。

/*跨浏览器添加事件解决方案*/

var eventUtil = {
    /**
     * @param ele   DOM 元素
     * @param type  事件类型，统一传递不包含’on‘的事件
     * @param handler   事件函数
     */
    addHandler: function (ele, type, handler) {
        if (ele.addEventListener) {//判断DOM 2级
            ele.addEventListener(type, handler, false);
        } else if (ele.attachEvent) {//IE事件判断
            ele.attachEvent('on'+type,handler);
        } else {
            ele['on' + type]=handler;
        }
    },
    delHandler: function (ele, type, handler) {
        if (ele.removeEventListener()) {//判断DOM 2级
            ele.removeEventListener(type, handler, false);
        } else if (ele.detachEvent()) {//IE事件判断
            ele.detachEvent('on'+type,handler);
        } else {
            ele['on' + type]=null;
        }
    }
}

使用方法：
在HTML页面的head标签中引用js文件：

 <script src="basic.js" type="text/javascript" ></script>

<input type="button" value="按钮" id="btn">

<script type="text/javascript">
    var btn=document.getElementById("btn");
    function showMsg() {
        alert("跨浏览器解决方案！");
    }
    eventUtil.addHandler(btn,'click',showMsg);
</script>

事件对象

事件对象：在触发DOM上的事件时都会产生于一个对象。
事件对象event
1、DOM中的事件对象
(1)、type属性，用于获取事件类型
(2)、target属性，用于获取事件目标
(3)、stopPropagation()方法，用于阻止事件冒泡(一般是IE)
(4)、preventDefault()方法，用于阻止默认行为(如：a标签)

2、IE中的事件对象

(1)、type属性，用于获取事件类型
(2)、srcElement属性，用于获取事件的目标
(3)、cancelBubble属性，用于阻止事件冒泡
设置为true表示阻止冒泡，设置为false表示不阻止冒泡
(4)、returnValue属性，用于阻止事件的默认行为
设置为false可以阻止事件的默认行为

润田原来是纯净水

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM事件(JS事件)

事件流描述的是从页面中接受事件的程序。 IE浏览器：事件冒泡流其他浏览器(N):事件捕获流 1、事件冒泡：即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上传播至最不具体的那个节点(文档).比如：在html页面中有一个按钮，点击这个按钮的时候，有以下情况。<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫