DOM0,DOM2添加事件的比较

最新推荐文章于 2023-03-16 23:38:15 发布

w2515543429

最新推荐文章于 2023-03-16 23:38:15 发布

阅读量456

点赞数 1

分类专栏： js 文章标签： DOM0 DOM2

本文链接：https://blog.csdn.net/w2515543429/article/details/81841602

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

DOM0,DOM2添加事件的比较

一. 常用的事件（DOMO为例）

onclick ——点击事件
ondblclick —— 双击事件
onmouseover ——鼠标移到某个元素之上
onmouseout——鼠标从某个元素移开
onmousedown——鼠标按下
onmouseup——鼠标抬起

二.DOM0添加事件监听

DOM0：最常见
1.内联模型
2.脚本模型
eg:

<body>
<button onclick="login()">登录</button><!--内联模型-->
<button id="btn">脚本模型</button>
</body>
<script>
    function login() {
        alert("wangjin")
    }
    document.getElementById("btn").onclick = function () {
        alert("wxy");/*脚本模型*/
    }
</script>

针对IE和W3C添加事件的区别
*1.方法名不一样 IE用attachEvent()，W3C用 addEventListener()
* 2.参数个数不一样 IE 有2 个，W3C有 3个
* 3.事件类型写法不一样 IE 有on前缀， W3C无on前缀

三.DOM2添加事件监听

针对IE低版本浏览器和其他浏览器有不同的添加方式
eg:

var  btn = document.getElementById("btn");
    if(btn.attachEvent){
        btn.attachEvent("onclick",function () {
            console.log("wangjin")//低版本IE使用方法
        })
    }else{
        btn.addEventListener("click",function () {
           console.log("wxy")
        },false)//false针对事件冒泡，true则是事件流
    }

四. DOM0和DOM2添加事件监听比较

DOM0添加事件监听的特点
1.不同的时间类型可以添加多个
2.相同的事件类型只能添加一个
DOM2添加事件监听的特点:
1.不同的事件类型可以添加多个
2.相同的事件类型也可以添加多个

五.事件流

事件流的两种模式 IE浏览器只有事件冒泡这一种模式,所以没有必要通过第三个参数进行设置
但是W3C需要指定事件流的方式(第三个值默认是false:事件冒泡)

1.事件冒泡

从子元素往父元素方向走
当子元素触发一种事件操作时,如果父元素也有相同的事件监听,
会自动触发父元素的事件处理函数

2.事件捕获

和事件冒泡是反向的
从父元素往子元素走

阻止事件冒泡的方法:

IE event.cancelBubble = true;
其他浏览器 event.stopPropagation();

六.阻止默认事件

阻止默认事件经常用在表单操作中,如果验证通过则直接执行表单数据的提交
如果验证失败,通过阻止默认事件,把数据提交终止,弹出相关的错误信息

  event.preventDefault();

w2515543429

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
DOM0,DOM2添加事件的比较

DOM0,DOM2添加事件的比较一. 常用的事件（DOMO为例）onclick ——点击事件 ondblclick —— 双击事件 onmouseover ——鼠标移到某个元素之上 onmouseout——鼠标从某个元素移开 onmousedown——鼠标按下 onmouseup——鼠标抬起二.DOM0添加事件监听DOM0：最常见 1.内联模型 2.脚本模型 ...
复制链接

扫一扫