113_js笔记15_事件的dom操作

最新推荐文章于 2022-11-21 13:59:02 发布

✅_蜡笔小新_✅

最新推荐文章于 2022-11-21 13:59:02 发布

阅读量75

点赞数

本文链接：https://blog.csdn.net/a_horse/article/details/84559990

版权

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应

一，标签的默认事件属性

当用户鼠标点击，按下，抬起：onmousedown、onmouseup 以及 onclick 事件

onClick事件写法1：
//标签
<button onclick="displayDate()">1，onClick点击</button>

//事件
 function displayDate(){
        document.getElementById("demo").innerHTML=Date();
 }

onClick事件写法2：
//标签
<button id="myBtn">1，onClick点击</button>
//事件
 document.getElementById("myBtn").onclick=function(){displayDate()};
 function displayDate(){
        document.getElementById("demo").innerHTML=Date();
 }

添加多个事件：按下，抬起，点击
<div onmousedown="mDown(this)" onmouseup="mUp(this)" onclick="mClick(this)" 
>按下，抬起，点击</div>
   function mDown(obj){
	        obj.style.backgroundColor = 'red';
    }
   function mUp(obj){
            obj.style.backgroundColor = 'yellow';
    }
   function mClick(obj){
            obj.style.backgroundColor = 'blue';
        }

当输入字段被改变时：onchange 事件

// 标签
 <input type="text" id="input" onchange="myFunction()">

// onchange 事件
    function myFunction(){
        var x=document.getElementById("input");
        x.value=x.value.toUpperCase();
        };

当网页已加载时：onload 和 onunload 事件

// 事件写在body标签里边
<body onload="checkCookies()">

// onload 和 onunload 事件
    function checkCookies(){
        if (navigator.cookieEnabled==true){
            alert("Cookies 可用")
        }
        else{
            alert("Cookies 不可用")
        };
    }

当鼠标移动到元素上和离开时：onmouseover 和 onmouseout 事件

//标签
    <div onmouseover="mOver(this)" onmouseout="mOut(this)" 
>鼠标放在上边和离开</div>

// onmouseover 和 onmouseout 事件
    function mOver(obj){
	    obj.innerHTML="Thank You"
        }
        function mOut(obj){
	    obj.innerHTML="Mouse Over Me"
        }

二，添加和移除事件的句柄

添加事件： addEventListener

句柄写在语句中

// 标签
<button id="myBtn2">添加事件句柄1</button>
// 添加事件句柄1：直接写在语句中
        document.getElementById("myBtn2").addEventListener("click", function(){
    alert("Hello World!");});

句柄写在函数中

 // 标签
<button id="myBtn3">添加事件句柄2</button>
 // 添加事件句柄2：写在函数中
        document.getElementById("myBtn3").addEventListener("click", myFunction2);
        function myFunction2() {
            alert ("Hello World!");
        }

事件的冒泡和捕获

//标签
<div id="myDiv" style="background-color:aquamarine">
	<p id="myP">冒泡演示：先内后外</p>
</div><br>
<div id="myDiv2" style="background-color:gold;">
	<p id="myP2">捕获演示：先外后内 </p>
</div>

//事件
      /*
        事件的冒泡：内部元素的事件会先被触发，然后再触发外部元素
        事件的捕获，外部元素的事件会先被触发，然后才会触发内部元素的事件
        */ 
        document.getElementById("myP").addEventListener("click", function() {
            alert("你点击了 P 元素!");
        }, false);
        document.getElementById("myDiv").addEventListener("click", function() {
            alert(" 你点击了 DIV 元素 !");
        }, false);
        document.getElementById("myP2").addEventListener("click", function() {
            alert("你点击了 P2 元素!");
        }, true);
        document.getElementById("myDiv2").addEventListener("click", function() {
            alert("你点击了 DIV2 元素 !");
        }, true);

移除事件：removeEventListener()

✅_蜡笔小新_✅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
113_js笔记15_事件的dom操作

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应一，标签的默认事件属性当用户鼠标点击，按下，抬起：onmousedown、onmouseup 以及 onclick 事件 onClick事件写法1：//标签&lt;button onclick="displayDate()"&gt;1，onClick点击&lt;/button&gt;//事件 f...
复制链接

扫一扫