Dom操作–事件

最新推荐文章于 2024-01-19 00:23:04 发布

奔跑的蚂蚁2019

最新推荐文章于 2024-01-19 00:23:04 发布

阅读量164

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/qq_41729404/article/details/86385798

版权

学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Dom操作–事件

js的核心：根据事件来修改标签的属性值
常用的事件：

onmouseover 当鼠标悬停的时候
onmouseout 当鼠标离开的时候
onmouseup 当鼠标松开的时候
onmousedown 当鼠标按下的时候
onmousemove 当鼠标移动的时候
onclick 点击事件
ondblclick 双击事件
onblur 当失去焦点的时候
onfocus 得到焦点的时候

事件使用
事件绑定

执行两个onclick事件
addEventListener 主流浏览器
attachEvent IE浏览器
removeEventListener 主流浏览器
detachEvent IE浏览器

事件 ev (主流) 和 window.event

兼容写法

var oEvent = ev ||window.event

事件源对象

srcElement (谷歌和IE)
target （火狐专用） oEvent.clientY

获取鼠标的 x 和 y 坐标

 console.log(oEvent.clientX , oEvent.clientY);

事件冒泡/取消事件冒泡

  var oEvent = ev ||window.event;  //(window 可以省略不写)
  oEvent.cancelBubble = true；

超链接和点击事件同时触发

阻止默认的行为不去相应，只影响自己添加的事件

return false ：函数中的return false 然后 onclick 中的 return demo()
oEvent.preventDefault() （无论是针对普通事件还是绑定的事件都管用）主流浏览器支持

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
</head>
<body>
<div id="div" style="width: 300px; height: 300px; background-color: red;" onclick="change(this)"></div>
<script>
    /**
     * js-Dom操作--事件
     * 1. js的核心：根据事件来修改标签的属性值
     * 2. 常用的事件有：
     *      onmouseover    当鼠标悬停的时候
     *      onmouseout     当鼠标离开的时候
     *      onmouseup      当鼠标松开的时候
     *      onmousedown    当鼠标按下的时候
     *      onmousemove    当鼠标移动的时候
     *      onclick        点击事件
     *      ondblclick     双击事件
     *      onblur         当失去焦点的时候
     *      onfocus        得到焦点的时候
     * 3. 事件使用
     *
     * 4. 事件绑定
     *        执行两个onclick事件
     *        addEventListener     主流浏览器
     *        attachEvent          IE浏览器
     *        removeEventListener  主流浏览器
     *        detachEvent          IE浏览器
     */

    // var oDiv = document.getElementById('div');
    // oDiv.onclick = change1;
    function change(obj) {
       obj.style.backgroundColor = 'pink';
    }

    // function change1() {
    //     this.style.backgroundColor = 'blue';
    // }

    // oDiv.onclick = function () {
    //     this.style.backgroundColor = 'yellow';
    // }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
</head>
<body>
<div id="div" style="width: 300px; height: 300px; background-color: #0D3349"></div>
<script>
    var oDiv = document.getElementById('div');
    // oDiv.onclick = test1;
    // oDiv.onclick = test2;
    addEvent(oDiv, 'click', test1);
    addEvent(oDiv, 'click', test2);
    //谷歌浏览器写法
    // oDiv.addEventListener('click', test1);
    // oDiv.addEventListener('click', test2);

    // 兼容写法
    function addEvent(obj, ev, fn) {
        if (obj.addEventListener) {
            obj.addEventListener(ev, fn);
        } else {
            obj.attachEvent('on' + ev, fn);
        }

    }

    function test1() {
        console.log("test1");
    }

    function test2() {
        console.log("test2");
    }

    // 通常不能一次给一个表签绑定两个事件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
</head>
<body>
<div id="div1" style="width: 300px; height: 300px; background-color: red">
    <div id="div2" style="width: 100px; height: 100px; background-color: yellow;"></div>
</div>

<script>
    var oDiv1 = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    oDiv2.onclick = function (ev) {
        var oEvent = event || ev;
        oEvent.cancelBubble = true;
        console.log(100);
    }
    oDiv1.onclick = function () {
        console.log(200);
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象</title>
</head>
<body>
<div id="div" style="width: 300px; height: 300px; background-color: red;"> nedjfhoiaesf-df</div>
<script>
    /**
     * 事件ev (主流) 和 window.event
     * 兼容写法   var oEvent =  ev \\window.event
     * 事件源对象
     *          srcElement (谷歌和IE)
     *          target    （火狐专用） oEvent.clientY
     * 获取鼠标的 x 和 y 坐标
     *          console.log(oEvent.clientX , oEvent.clientY);
     * 事件冒泡/取消事件冒泡
     *          var oEvent = ev \\window.event;  (window 可以省略不写)
     *          oEvent.cancelBubble = true;
     *
     *  6. 超链接和点击事件同时触发
     *     阻止默认的行为不去相应， 只影响自己添加的事件
     *     return false ： 函数中的return false   然后 onclick 中的 return demo()
     *     oEvent.preventDefault()
     *     （无论是针对普通事件还是绑定的事件都管用）  主流浏览器支持
     */
    var oDiv = document.getElementById('div');
    oDiv.onclick = function (ev) {
        var oEvent = ev ||window.event;
        // alert(oEvent);
        alert(oEvent.srcElement.innerHTML);
    }
</script>
</body>
</html>

奔跑的蚂蚁2019

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dom操作–事件

Dom操作–事件js的核心：根据事件来修改标签的属性值常用的事件：onmouseover 当鼠标悬停的时候onmouseout 当鼠标离开的时候onmouseup 当鼠标松开的时候onmousedown 当鼠标按下的时候onmousemove 当鼠标移动的时候onclick 点击事件ondblclick 双击事...
复制链接

扫一扫

专栏目录