JS 事件

发生在 web 网页的 JS 事件,比如点击事件、input获取焦点事件。

  • JS 事件绑定。
  • JS 事件冒泡。
  • JS 中常用事件。

HTML 的事件有:

  • 浏览器行,如 页面完成加载(window.onload)。
  • 用户行为,如 点击事件。

JS - 事件绑定

事件有三要素:

  • 事件源(HTML 元素)
  • 事件(行为)
  • 事件驱动程序(对元素的操作)

在 HTML 元素处绑定称为行内绑定。

<!-- 行内绑定,事件为点击事件 onclick -->
<button onclick="btn1()">按钮1</button>  

<button id="btn2">按钮2</button>

<script>
	function btn1(){             // 绑定事件
		console.log("点击了按钮1"); //事件驱动程序
	}
	var el = document.getElementById("btn2"); //获取事件源
	el.onclick = function(){  //绑定事件
		console.log("点击了按钮2"); //事件驱动程序
	}
</script>

在方法里面(事件驱动程序)想要获取到事件源,这里要用到thiswindow.event:

<!-- 这里一定要用到 this,表示把这个元素当参数传递-->
<button onclick="btn1()">按钮1</button> 
<button id="btn2">按钮2</button>

<script>
	function btn1(){ //这个 even 是自定义名
		console.log("点击了按钮1");
		
		//获取事件对象
		var e = e || window.event; 
		//获取事件源
		var target = e.target || e.srcElement;
		
		target.style.backgroundColor="red"; //修改按钮背景色
		console.log(target);
	}
	
	var el = document.getElementById("btn2");
	el.onclick=function(){
		this.style.color="red"; //this 修改按钮字体颜色
		console.log("点击了按钮2");
		console.log(this);
	}
</script>

事件1.jpg

图1

onclick="btn1()" 不带参数。
onclick="btn1(123,'abc')" 带参数。
按钮2的绑定方式中,this 是程序默认有的,可直接使用。 var e = e || window.event; 兼容性写法,IE和Chrome下是window.event,Firefox下是e。
var target = e.target || e.srcElement; 兼容性写法,IE和Chrome下是srcElement Firefox下是target。

获取事件源实例

解除事件绑定 :

el.onclick=null;

JS - 事件冒泡

一个按钮绑定着点击事件,点击这个按钮,点击事件会依次在它的父级元素中被触发。
阻止事件冒泡到父级元素:e.stopPropagation(),IE则是使用e.cancelBubble = true。

事件冒泡1.png

图2

阻止冒泡 :

window.event? window.event.cancelBubble = true : window.event.stopPropagation();

取消默认行为,e.preventDefault(),IE则是使用e.returnValue = false。
比如 a 链接的跳转,取消默认行为后,点击 a 链接后不会跳转了 :

<a href="https://www.pangugle.com/index.html" id="textA" >pangugle 教程</a>

<script>
var a = document.getElementById("testA");
a.onclick =function(e){
	if(e.preventDefault){
		e.preventDefault();
	}else{
		window.event.returnValue == false;
	}
}
</script>

事件冒泡实例

JS - 常用事件

JS 常用事件

事件 描述
onclick 点击某个对象时触发
ondblclick 双击某个对象时触发
oncontextmenu 点击鼠标右键时触发
onkeydown 键盘的键按下时触发
onresize 浏览器窗口大小改变时触发
onscroll 页面滚动时触发
onfocus 元素获得焦点时触发
onblur 元素失去焦点时触发
onchange 元素内容改变时触发
oninput 元素获取用户输入时触发
onsubmit 提交按钮时触发