2.javascript中的事件对象【学习笔记】

最新推荐文章于 2024-03-11 11:11:28 发布

saber_chan

最新推荐文章于 2024-03-11 11:11:28 发布

阅读量190

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_34351612/article/details/60468670

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

事件对象 event

可观看视频 http://www.imooc.com/video/2139

参考书籍《javascript程序员参考手册》第十二章

1.DOM中的事件对象（IE中不支持）

1.1常用属性：

（1）type属性获取事件类型

（2）target 属性获取事件目标

1.2常用方法：

（1）stopPropagation() 方法阻止事件冒泡

（2）preventDefault() 方法阻止事件的默认行为

1.2.（1）stopPropagation() 方法阻止事件冒泡例子：

给btn3添加了一个showMessage()函数，给btn3的父元素添加了一个showBox()函数

测试结果：先弹出hello world! 确定之后弹出这是放按钮的盒子

//使用 stopPropagation() 方法

1.2.（2）preventDefault() 方法阻止事件的默认行为例子：

//先阻止冒泡，

测试：实现了跳转

// 阻止事件的跳转（默认）行为

2.IE中的事件对象

1.1常用属性：

（1）type属性获取事件类型

（2）srcElement 属性获取事件目标

（3）canceBubble 属性阻止事件冒泡（ture:阻止冒泡）

（4）returnValue 属性阻止事件默认行为（false:阻止默认行为）

1.1. （2）srcElement 属性获取事件目标

注：非 IE 可以直接使用event ; 但是 IE8 前引用需要 window.event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件流</title>
    <script src="js/event.js"></script>
    <script src="js/script.js"></script>
</head>
<body>
    <div id="box">
        <input type="button" value="按钮" id="btn" οnclick="showMessage()">
        <input type="button" value="按钮2" id="btn2">
        <input type="button" value="按钮3" id="btn3">
        <a href="event.html" id="go">跳转</a>
    </div>

    <script>
        function showMessage(event) {
            event=event || window.event;
            var ele=event.target || event.srcElement;
            alert(ele);
            event.stopPropagation();
        }
        function showBox() {
            alert('这是放按钮的盒子');
        }
        function stopGoto(event) {
            event.stopPropagation();
            event.preventDefault();
        }

        var btn2=document.getElementById('btn2');
        var btn3=document.getElementById('btn3');
        var box = document.getElementById('box');
        var go = document.getElementById('go');

        <!--btn2添加onclick属性，写成匿名函数-->
        btn2.οnclick=function () {
            alert('这是通过DOM 0级添加的事件！');
        }
        btn2.οnclick=null; //取消onclick事件 直接赋值为null

//        <!-- 给btn3添加DOM2级事件程序-->
//        btn3.addEventListener('click',showMessage,false);
//        btn3.addEventListener('click',function () {
//            alert(this.value);
//        },false);
//        //btn3.removeEventListener('click',showMessage,false); //删除事件

//        btn3.attachEvent('onclick',showMessage);
//        btn3.detachEvent('onclick',showMessage); //删除事件


        //测试btn3
        eventUtil.addEvent(btn3,'click',showMessage);
        //eventUtil.removeEvent(btn3,'click',showMessage);

        //给box添加事件
        eventUtil.addEvent(box,'click',showBox);

        eventUtil.addEvent(go,'click',stopGoto);
    </script>
</body>
</html>

// 对各类型事件进行封装

// 测试

saber_chan

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.javascript中的事件对象【学习笔记】

事件对象 event可观看视频 http://www.imooc.com/video/2139 参考书籍《javascript程序员参考手册》第十二章1.DOM中的事件对象（IE中不支持） 1.1常用属性：（1）type属性获取事件类型（2）target 属性获取事件目标 1.2常用方法
复制链接

扫一扫