JavaScript-10(JavaScript事件)

一、事件基础

1.绑定事件

  • 把事件当做HTML元素的属性

    <button onclick="code...">

  • 把事件当做dom对象的方法

    dom.onclick = function(){code....}

  • 事件监听方式

    • addEventListener(eventName, fn, true/false)
    • attachEvent(eventName, fn)（IE8-）

2. 解除事件的绑定

  • 绑定方式： 把事件当做html元素属性 / 把事件当做dom对象的方法

    重新绑定一个空的function，覆盖前面dom.onclick = function(){}

  • 绑定方式 是 事件监听方式

    • removeEventListener(event, fn)
    • detachEvent(event, fn)

3.this的用法

  • 循环给一组元素绑定事件的时候

  • 事件作为html元素属性的时候，函数调用，传this表示 该元素

  • 在元素内部 通过属性形式 <button onclick="fn(this)"> 此时this表示所在的元素

      <body>
  <ul id="myList">
  	<li>哈哈哈</li>
  	<li>嘿嘿嘿</li>
  	<li>嘻嘻嘻</li>
  	<li>呵呵呵</li>
  	<li>呀呀呀</li>
  </ul>

  <script>
  	var lis=document.getElementById("myList").getElementsByTagName("li");

  	//遍历
  	for(var i=0;i<lis.length;i++){
  		lis[i].onclick=function(){
  			this.style.backgroundColor="pink";
  		}
  	}
  </script>
  </body>

二、事件类型

1.鼠标事件

  • click 单击
  • dblclick 双击
  • contextmenu 右击
  • mouseover 鼠标进入元素
  • mouseout 鼠标离开元素
  • mousedown 鼠标按键按下
  • mouseup 鼠标按键抬起
  • mousemove 鼠标移动

2.键盘事件

  • keydown 键盘按键按下
  • keyup 键盘按键抬起
  • keypress 键盘按键 按下 (只有字符按键) (控制按键不可以 Ctrl shift 上下左右都不行)

3.文档事件

  • load 加载完成（绑定给window、img、document.body）
  • unload 文档关闭
  • beforeunload 文档关闭 (兼容性好)

4.表单事件

  • submit 表单提交的时候, 绑定给form元素
  • reset 表单重置, 绑定给form元素
  • blur 失去焦点(绑定给输入框)
  • focus 获得焦点(绑定给输入框)
  • change 表单控制的内容改变（通常绑定给select radio checkbox）
    • 如果绑定给input 必须同时满足两个条件
    • 内容改变和失去焦点 才能触发
  • select 可输入的元素绑定input 或 textarea 内容被选中的时候触发

5.图片事件

  • abort 图片加载中断
  • load 图片加载完成
  • error 图片加载错误

6.其他事件

  • scroll 元素内部的内容滚动 （适合于有滚动条的元素）
  • resize 绑定给window, 窗口尺寸发生变化

三、Event 对象

1.Event种类

  • mouseEvent
  • keyboardEvent
  • focusEvent

2.属性

  • clientX 鼠标的x坐标

  • clientY 鼠标的Y坐标

  • keyCode 键盘按键的值

  • button 鼠标按键的标示

    • 0 按了左键
    • 1 按了滚轮
    • 2 按了右键

  • cancelBubble 阻止事件冒泡 设置为true

  • target 返回触发此事件的元素(具体触发事件的元素)

      <script>
  	document.onclick = function(ev){
  		/*console.log(ev.target)可以知道具体点了哪个元素*/
  		ev.target.style.backgroundColor = "green";
  	}
  </script>

  • type 返回事件类型(mouse keyborad... )

  • timeStamp 返回触发事件的那一刻的时间戳(从页面打开的那一刻开始

  • altKey 返回当事件被触发时，"ALT" 是否被按下。

  • ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。

  • shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。

3.方法

  • stopPropagation() 阻止冒泡
  • preventDefault() 阻止默认动作

4.事件的冒泡和捕获

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的冒泡和捕获</title>
<style>
	#big{
		width:500px;	
		height:500px;
		border:1px solid #ccc;
		background:#999;
	}
	#middle{
		margin:100px;
		width:300px;	
		height:300px;
		border:1px solid #ccc;
		background:orange;
	}
	#small{
		margin:100px;
		width: 100px;
		height: 100px;
		border:1px solid #ccc;
		background:pink;
	}
</style>
</head>
<body>
<div id="big">
	<div id="middle">
		<div id="small"></div>
	</div>
</div>

<script>
	var bigEle=document.getElementById("big");
	var middleEle=document.getElementById("middle");
	var smallEle=document.getElementById("small");

	/**
	 * 分别绑定事件
	 * 点击最小的会依次弹出Big,small,Middle
	 */
	bigEle.addEventListener("click",function(){
		alert("Big");		
	},true)/*true 捕获阶段触发*/

	middleEle.addEventListener("click",function(){
		alert("Middle");
	})/*不设置第三个数默认为 false 冒泡*/

	smallEle.addEventListener("click",function(){
		alert("small");
	})
</script>
</body>
</html>

四、Element(所有的元素都具有的属性)

  • offsetLeft
  • offsetTop
  • scrollLeft 内容向左滚动的距离（也可以为滚动条滚动的距离）
  • scrollTop 内容向上滚动的距离（也可以为滚动条滚动的距离）
  • getBoundingClientRect() 元素到视窗口的距离（ box.getBoundingClientRect().left/top）
posted @ 2017-09-01 16:03  blue星期天  阅读(201)  评论(0)  编辑  收藏  举报