DOM事件的处理

最新推荐文章于 2023-07-05 22:21:38 发布

Bart_G

最新推荐文章于 2023-07-05 22:21:38 发布

阅读量386

点赞数

分类专栏： JavaScript 文章标签： dom html javascript

本文链接：https://blog.csdn.net/rocky_03/article/details/54024580

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

处理事件的两种方式

eg：

<html>
<head>
<title>DOM EVent</title>
</head>
<body>
<div id="box">
<input type="button" id="btn"value="按钮"/>
</div>
</body>
</html>

事件冒泡

当点击按钮时候，先触发的按钮然后出发按钮所在的div再出发div所在的body然后到html最后到document，一层一层的冒出来

事件捕获

当点击按钮之后，先是触发的document然后是html最后是button，顺序刚好是冒泡的相反顺序

事件处理程序

HTML处理

<html>
<head>
<title>DOM EVent</title>
</head>
<body>
<div id="box">
<input type="button" id="btn" value="按钮" onclick="alert('hello')"/>
</div>
</body>
</html>

当点击按钮式的时候，在html代码中触发并处理了事件

DOM0级事件处理

<html>
<head>
<title>DOM EVent</title>
</head>
<body>
<div id="box">
<input type="button" id="btn" value="按钮" onclick="showMessage()"/>
</div>
<script type="text/javascript">
    function showMessage(){
        alert("DOM0级事件处理");
    } 

    var btn = document.getElementById("btn");
    btn.onclick = function(){
        alert("DOM0级事件从匿名函数触发");
    }
    //删除btn的onclick事件
    btn.onclick = null;

</script>
</body>
</html>

该方法实现了事件处理和html的分离，但是jS和html仍然偶合在一起

DOM2级事件处理

addEventListener(arg0,arg1,arg2);
removeEventListener(arg0,arg1,arg2);
- arg0:要处理的事件名
- arg2：作为事件处理程序的函数
- arg3：布尔值为false为冒泡事件处理方式

<html>
<head>
<title>DOM EVent</title>
</head>
<body>
<div id="box">
<input type="button" id="btn" value="按钮"/>
</div>
<script type="text/javascript">
   function showMessage(){
        alert("DOM0级事件处理");
    } 
    var btn = document.getElementById('btn');
    //注意此处的事件名称是click不是onclick
    btn.addEventListener('click',showMessage,false);
    //删除事件，只能通过remove..方式删除事件
    //btn.removeEventListener('click',showMessage,false);
</script>
</body>
</html>

解决IE浏览器和其他浏览器兼容问题

由于浏览器的兼容性问题，很多事件处理在不同浏览器中处理方式不一样，这就需要在编码的时候进行考虑多种情况来解决这种问题。

<html>
<head>
<title>DOM EVent</title>
</head>
<body>
<div id="box">
<input type="button" id="btn" value="按钮"/>
</div>
<script type="text/javascript">

    function showMessage(){
        alert("DOM多版本浏览器事件处理");
    } 

    var btn = document.getElementById('btn');

    //创建对象来封装事件处理
    var eventUtil = {
        addHandler:function(element,type,handler){
            if(element.addEventListener){
                //chrome浏览器
                element.addEventListener(type,handler,false);
            }else
            if(element.attachEvent){
                //IE浏览器
                element.attachEvent('on'+type,handler);
            }else{
                //较早版本的IE浏览器
                element['on'+type] = handler;
            }
        },
        removeHandler:function(element,type,handler){
            if(element.removeEventListener){
                //chrome浏览器
                element.removeEventListener(type,handler,false);
            }else
            if(element.detachEvent){
                //IE浏览器
                element.detachEvent('on'+type,handler);
            }else{
                //较早版本的IE浏览器
                element['on'+type] = null;
            }
        }
    }

    eventUtil.addHandler(btn,'click',showMessage);


</script>
</body>
</html>

Bart_G

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM事件的处理

处理事件的两种方式eg：<html><head><title>DOM EVent</title></head><body><div id="box"><input type="button" id="btn"value="按钮"/></div></body></html>事件冒泡当点击按钮时候，先触发的按钮然后出发按钮所在的div再出发div所在的body然后到html最后到doc
复制链接

扫一扫