组团学
学习方向
登录/注册

DOM-事件

阅读 (382)

一、事件处理程序

事件：就是用户或者是浏览器执行的某种动作

事件处理程序：就是响应事件的函数，事件处理程序的名字是以“on”开头的

事件类型.png

添加事件的方式：

  • 方式1：直接在html标签中给与事件处理程序同名的属性赋值js代码

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件处理程序01</title>
</head>
<body>
	<button id="btn" onclick="console.log('sunck good')">按键</button>
</body>
</html>

  • 方式2：给与事件处理程序同名的属性赋值一个函数调用语句

    说明：使HTML代码与JS代码稍微有点儿分离，不至于第一种那么紧密耦合

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件处理程序02</title>
</head>
<body>
	<button id="btn" onclick="func()">按键</button>
	<script type="text/javascript">
    function func() {
			console.log("sunck nice");
		}    
	</script>
</body>
</html>

  • 方式3：DOM0级事件处理程序

    说明：这种方式也是早期的写法，但好处是可以将JS与HTML完全分离，前提是需要给HTML元素提供一个额外的id属性(或其它能获取该元素对象的方式)

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件处理程序03</title>
</head>
<body>
	<button id="btn">按键</button>
	<script type="text/javascript">
        //找到id为btn的按键
		var jsBtn = document.getElementById("btn");
		//在这里添加事件处理程序
		jsBtn.onclick = func;
		function func() {
			console.log("sunck cool");
		}    
	</script>
</body>
</html>

  • 方式4：DOM2级事件处理程序

    说明：是目前最流行的事件处理程序，各大主流浏览器全部支持

    格式：元素节点.addEventListener("事件名",响应事件的函数,布尔值);

    参数：

    • 事件名：click mouseover mouseout
    • 函数名或者匿名函数
    • 事件流 false

    注意：可以绑定多个事件，相互之间不影响

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件处理程序04</title>
</head>
<body>
	<button id="btn">按键</button>
	<script type="text/javascript">
        var jsBtn = document.getElementById("btn");
        jsBtn.addEventListener("click", func1, false);
        function func1() {
            console.log("sunck handsome");
        }
        jsBtn.addEventListener("click", func2, false);
        function func2() {
            console.log("sunck very handsome");
        }  
	</script>
</body>
</html>

需求：以上代码在点击按钮是同时更换按钮背景颜色

  • 方式2的解决方案

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件处理程序02</title>
</head>
<body>
    <!-- this代表的是button标签本身 -->
	<button id="btn" onclick="func(this)">按键</button>
	<script type="text/javascript">
      function func(obj) {
			    console.log("sunck nice");
          obj.style.backgroundColor = "red";
            
          console.log(obj);
          console.log(window);
          console.log(this);//this代表window
      }    
	</script>
</body>
</html>

  • 方式3的解决方案

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件处理程序03</title>
</head>
<body>
	<button id="btn">按键</button>
	<script type="text/javascript">
		var jsBtn = document.getElementById("btn");
		jsBtn.onclick = func;
		function func() {
			  console.log("sunck cool");
      
        // jsBtn.style.backgroundColor = "red";
        this.style.backgroundColor = "red";
            
        console.log(window);
        console.log(this);//this代表当前响应元素节点    
		}    
	</script>
</body>
</html>

  • 方式4的解决方案

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件处理程序04</title>
</head>
<body>
	<button id="btn">按键</button>
	<script type="text/javascript">
        var jsBtn = document.getElementById("btn");
        jsBtn.addEventListener("click", func1, false);
        function func1() {
            console.log("sunck handsome");
            
            // jsBtn.style.backgroundColor = "red";
            this.style.backgroundColor = "red";
            
            console.log(window);
            console.log(this);//this代表当前响应元素节点
        }
        jsBtn.addEventListener("click", func2, false);
        function func2() {
            console.log("sunck very handsome");
        }  
	</script>
</body>
</html>

  • 对this的总结

    • 在标签中使用，代表的是标签本身
    • 在函数体中直接使用，代表的是window。在标签中将this作为实参传递到函数中，在函数体中使用形参代表标签本身
    • 在事件函数中使用，代表标签本身

移除事件：

  • 方案3移除事件方式

    格式：元素对象.事件处理程序 = null;

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件处理程序03</title>
</head>
<body>
	<button id="btn">按键</button>
	<script type="text/javascript">
		var jsBtn = document.getElementById("btn");
		jsBtn.onclick = func;
		function func() {
			console.log("sunck cool"); 
		}    
    jsBtn.onclick = null;
	</script>
</body>
</html>

  • 方案4移除事件方式

    注意：参数与添加事件时相同，添加事件时第二个参数不能是匿名函数

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件处理程序04</title>
</head>
<body>
	<button id="btn">按键</button>
	<script type="text/javascript">
        var jsBtn = document.getElementById("btn");
        jsBtn.addEventListener("click", func, false);
        function func() {
            console.log("sunck handsome");
        }
        jsBtn.removeEventListener("click", func, false);
	</script>
</body>
</html>

二、事件对象

注意：每个事件函数的第一个参数默认为事件对象，该对象存储着事件的一些信息

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件对象</title>
    <style type="text/css">
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
	<div id="box"></div>
    <script type="text/javascript">
        var jsDiv = document.getElementById("box");
        jsDiv.addEventListener("click", func, false);
        function func(event){
            // IE浏览器：window.event
            var evt = window.event || event;
            console.log(evt);
        }
    </script>
</body>
</html>

三、焦点事件

注意：一般用于文本框上

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>焦点事件</title>
</head>
<body>
	<input type="text" name="in" id="put" />
	<script type="text/javascript">
		var jsInput = document.getElementById("put");

		//获取焦点
		jsInput.addEventListener("focus", funcFocus, false);
		function funcFocus(event) {
        var evt = window.event || event;
        console.log(evt);
			  console.log("聚焦");
		}

		//失去焦点
		jsInput.addEventListener("blur", funcBlur, false);
		function funcBlur(event) {
        var evt = window.event || event;
        console.log(evt);
			  console.log("离焦");
		}
	</script>
</body>
</html>

四、鼠标事件(单击与双击)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标事件-单击与双击</title>
	<style type="text/css">
		#box{
			width: 100px;height: 100px;background-color: red
		}
	</style>
</head>
<body>
	<div id="box"></div>

	<script type="text/javascript">
		var jsDiv = document.getElementById("box");
		//添加单击事件
		jsDiv.addEventListener("click", funcOnceClick, false);
		function funcOnceClick() {
			console.log("单击");
		}
		//添加双击加事件
		jsDiv.addEventListener("dblclick", funcDoubleClick, false);
		function funcDoubleClick() {
			console.log("双击");
		}
	</script>
</body>
</html>

区分单击与双击：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标事件-单击与双击</title>
	<style type="text/css">
		#box{
			width: 100px;height: 100px;background-color: red
		}
	</style>
</head>
<body>
	<div id="box"></div>

	<script type="text/javascript">
		var jsDiv = document.getElementById("box");
		//区分单击还是双击，使用延时定时器
		var timer;

		//添加单击事件
		jsDiv.addEventListener("click", funcOnceClick, false);
		function funcOnceClick() {
			
			clearTimeout(timer);
			timer = setTimeout(function(){
				console.log("单击");
			}, 300);

		}

		//添加双击加事件
		jsDiv.addEventListener("dblclick", funcDoubleClick, false);
		function funcDoubleClick() {
			clearTimeout(timer);
			console.log("双击");
		}
	</script>
</body>
</html>

五、鼠标事件(操作相关)

mouseover：鼠标移入事件

mouseout：鼠标移出事件

mousedown：鼠标左键按下事件

mouseup：鼠标左键抬起事件

mousemove：鼠标移动事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <ul>
            <li>鼠标进入改变颜色</li>
            <li>鼠标移出恢复颜色</li>
            <li>鼠标按下字体放大</li>
            <li>鼠标抬起字体恢复</li>
        </ul>
        <div id="box" style="width: 100px;height: 100px;background-color: green;"></div>
        <script type="text/javascript">
            var jsLis = document.getElementsByTagName("li");
            for (var i = 0; i < jsLis.length; i++){
                jsLi = jsLis[i];
                jsLi.addEventListener("mouseover", function(){
                    this.style.backgroundColor = "red";
                }, false);
                jsLi.addEventListener("mouseout", function(){
                    this.style.backgroundColor = "#fff";
                }, false);
                jsLi.addEventListener("mousedown", function(){
                    this.style.fontSize = parseInt(window.getComputedStyle(this, null).fontSize) * 2 + "px";
                }, false);
                jsLi.addEventListener("mouseup", function(){
                    this.style.fontSize = parseInt(window.getComputedStyle(this, null).fontSize) / 2 + "px";
                }, false);
            }
            
            
            // document.addEventListener("mousemove", function(){
            //     console.log("鼠标移动")
            // }, false)
            var jsBox = document.getElementById("box");
            jsBox.addEventListener("mousemove", function(){
                console.log("鼠标移动")
            }, false)
        </script>
	</body>
</html>

六、鼠标事件的event对象

常用属性：
截屏2020022118.04.37.png

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标事件的event对象</title>
	<style type="text/css">
		#box{
			width: 200px;height: 200px;background-color: red;position: absolute;
		}
	</style>
</head>
<body style="height: 2000px">
	<div id="box"></div>

	<script type="text/javascript">
		var jsDiv = document.getElementById("box");

		jsDiv.onclick = function(event) {
			var evt = window.event || event;

			console.log(evt);
			console.log(evt.clientX, evt.clientY);
			console.log(evt.pageX, evt.pageY);
			console.log(evt.screenX, evt.screenY);
			console.log(evt.button);
		};
	</script>
</body>
</html>

七、拖拽效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>拖拽效果</title>
	<style type="text/css">
		#box{
			width: 100px;height: 100px;background-color: red;position: absolute;left: 50px;top: 50px
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<script type="text/javascript">
		var jsDiv = document.getElementById("box");

		var baseX = 0;
		var baseY = 0;

		var moveX = 0;
		var moveY = 0;

		jsDiv.onmousedown = function(e) {
			var evt = window.event || e;

			baseX = evt.pageX;
			baseY = evt.pageY;
			
			document.onmousemove = function(e) {
			var evt = window.event || e;
			
				moveX = evt.pageX - baseX;
				baseX = evt.pageX;

				moveY = evt.pageY - baseY;
				baseY = evt.pageY;
				jsDiv.style.left = jsDiv.offsetLeft + moveX + "px";
				jsDiv.style.top = jsDiv.offsetTop + moveY + "px";
			};
		};
		jsDiv.onmouseup = function(e) {
			document.onmousemove = null;
		};
	</script>
</body>
</html>

八、键盘事件

注意：键盘事件一般绑定在document上

事件 说明
keydown 按下键盘的任意键(连续调用)
keyup 抬起键盘的任意键(连续调用)
keypress 按下键盘的非ctrl/shift/alt/capsLock/ NumLock键(非键盘功能键)(连续调用) 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>键盘事件</title>
</head>
<body>
	<script type="text/javascript">
		document.onkeydown = function(event) {
			var evt = event || window.event;
			console.log(evt);
			console.log(evt.altKey, evt.ctrlKey, evt.shiftKey, evt.keyCode);
		};
		document.onkeyup = function(event) {
			var evt = event || window.event;
			console.log(evt);
			console.log(evt.altKey, evt.ctrlKey, evt.shiftKey, evt.keyCode);
		};
		document.onkeypress = function(event) {
			var evt = event || window.event;
			console.log(evt);
			console.log(evt.altKey, evt.ctrlKey, evt.shiftKey, evt.keyCode);
		};
	</script>
</body>
</html>

九、键盘操作标签移动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>键盘事件应用下例子</title>
	<style type="text/css">
		#box{
			width: 100px;height: 100px;background-color: red;position: absolute;
		}
	</style>
</head>
<body>
	<!-- 1.在页面有一个div,按下shift+C键的时候给div随机改变背景色； -->
	<!-- 2.通过上下左右方向键来控制div在页面上移动 -->
	<div id="box"></div>

	<script type="text/javascript">
		var jsDiv = document.getElementById("box");
		//改变颜色
		document.onkeydown = function(e) {
			var evt = e || window.event;
			if (evt.shiftKey == true && evt.keyCode == 67) {
                var r = parseInt(Math.random()*256);
                var g = parseInt(Math.random()*256);
                var b = parseInt(Math.random()*256);
                
				jsDiv.style.backgroundColor = "rgb("+r+","+g+","+b+")";
			}
		};

		//移动
		document.addEventListener("keydown", funcMove, false);
		function funcMove(event) {
			var evt = event || window.event;
			switch(evt.keyCode)
			{
				case 37:
					jsDiv.style.left = jsDiv.offsetLeft - 5 + "px";
					break;
				case 38:
					jsDiv.style.top = jsDiv.offsetTop - 5 + "px";
					break;
				case 39:
					jsDiv.style.left = jsDiv.offsetLeft + 5 + "px";
					break;
				case 40:
					jsDiv.style.top = jsDiv.offsetTop + 5 + "px";
					break;
			}
		}
	</script>
</body>
</html>

十、事件流

当浏览器发展到第四代的时候(IE4与Netscape 4)浏览器开发团队遇到一个有意思的问题：页面的哪一部分会拥有某个特定的事件？

比如在纸上画一组同心圆，如果把手指放在圆心。那么你的手指指的不是某一个特定的圆，而是纸上所有的圆。两家浏览器厂商看待浏览器事件上还是一致的。如果单击了按钮，他们认为单击事件不仅仅发生在按钮上。在单击按钮的同时，你也单击了按钮所在的容器元素，单击了整个界面

事件流是指从页面接受事件的顺序。但是两个浏览器团队在事件流上提出了完全相反的概念，IE提出事件冒泡，Netscape提出事件捕获

事件流.png

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>验证事件流</title>
	<style type="text/css">
		#box1{
			width: 200px;height: 200px;background-color: red
		}
		#box2{
			width: 100px;height: 100px;background-color: yellow
		}
		#box3{
			width: 50px;height: 50px;background-color: blue
		}
	</style>
</head>
<body>
	<div id="box1">
		<div id="box2">
			<div id="box3">
				
			</div>
		</div>
	</div>
	<script type="text/javascript">

		var jsDiv1 = document.getElementById("box1");
		var jsDiv2 = document.getElementById("box2");
		var jsDiv3 = document.getElementById("box3");

		//true  捕获阶段触发事件   box1--box2 -- box3
		//false 冒泡阶段触发事件	box3--box2 -- box1
		jsDiv1.addEventListener("click", func, false);
		jsDiv2.addEventListener("click", func, false);
		jsDiv3.addEventListener("click", func, false);

		function func() {
			console.log(this);
		}
		
	</script>
</body>
</html>

十一、阻止冒泡与默认行为

  • 冒泡问题

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>冒泡问题展示</title>
	<style type="text/css">
		#box{
			width: 100px;height: 100px;background-color: red
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<input type="text" name="in" id="put" />
	<a href="red.html" id="link">点我跳转</a>
	
	<script type="text/javascript">
		var jsDiv = document.getElementById("box");
		var jsInput = document.getElementById("put");
		var jsA = document.getElementById("link");

		document.body.onclick = jsDiv.onclick = function(event) {
            var r = parseInt(Math.random()*256);
            var g = parseInt(Math.random()*256);
            var b = parseInt(Math.random()*256);
            
			this.style.backgroundColor = "rgb("+r+","+g+","+b+")";
		};
	</script>
</body>
</html>

  • 阻止冒泡

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>阻止冒泡</title>
	<style type="text/css">
		#box{
			width: 100px;height: 100px;background-color: red
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<input type="text" name="in" id="put" />
	<a href="red.html" id="link">点我跳转</a>
	
	<script type="text/javascript">
		var jsDiv = document.getElementById("box");
		var jsInput = document.getElementById("put");
		var jsA = document.getElementById("link");

		document.body.onclick = jsDiv.onclick = function(event) {
            var r = parseInt(Math.random()*256);
            var g = parseInt(Math.random()*256);
            var b = parseInt(Math.random()*256);
			this.style.backgroundColor = "rgb("+r+","+g+","+b+")";
            //阻止冒泡
            window.event?window.event.cancelBubble=true:event.stopPropagation();
		};
        
        jsInput.onclick = function(event) {
        	window.event?window.event.cancelBubble=true:event.stopPropagation();
        };
        
        jsA.addEventListener("click", func, false);
        function func(event) {
        	window.event?window.event.cancelBubble=true:event.stopPropagation();
        }
	</script>
</body>
</html>

  • 默认行为问题

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>阻止冒泡</title>
	<style type="text/css">
		#box{
			width: 100px;height: 100px;background-color: red
		}
	</style>
</head>
<body>
	<a href="red.html" id="link">点我跳转</a>
	
	<script type="text/javascript">
		var jsA = document.getElementById("link");

        jsA.addEventListener("click", func, false);
        function func(event) {
          window.confirm("您访问的网站存在非法内容，确认访问?");
        	window.event?window.event.cancelBubble=true:event.stopPropagation();
        }
	</script>
</body>
</html>

  • 阻止默认行为

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>阻止冒泡</title>
	<style type="text/css">
		#box{
			width: 100px;height: 100px;background-color: red
		}
	</style>
</head>
<body>
	<a href="red.html" id="link">点我跳转</a>
	
	<script type="text/javascript">
		var jsA = document.getElementById("link");

        jsA.addEventListener("click", func, false);
        function func(event) {
            var d = window.confirm("您访问的网站存在非法内容，确认访问?");
            if (d == false){
              window.event?window.event.returnValue=false:event.preventDefault();
            }
            window.event?window.event.cancelBubble=true:event.stopPropagation();
        }
	</script>
</body>
</html>
需要 登录 才可以提问哦
头像
：
回复