JavaScript事件

最新推荐文章于 2024-06-10 17:00:16 发布

Diamonds、

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量117

点赞数

分类专栏： web

web 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

事件概念:
JavaScript使我们有能力创建动态页面,网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。我们可以认为事件是可以被JavaScript侦测到的一种行为。
事件流:
事件主要分为冒泡事件和捕获型事件。IE浏览器目前只支持冒泡型事件，而支持标准DOM的浏览器比如火狐，chrome等两者都支持。
使用返回值改变HTML元素的默认行为:
HTML元素大都包含了自己的默认行为，例如:超链接、提交按钮等。我们可以通过在绑定事件中加上return false来阻止他的默认行为。
1.通用性的事件监听方法

绑定HTML元素属性:

<input type="button" value="button" onclick="check(this)">

绑定DOM对象属性:

document.getElementById("button").onclick = test;//test时函数的名字,点击这个按钮就会触发这个函数的功能;

例子：

//HTML代码
<a href="https://www.baidu.com/" onclick="return false">百度</a>//本来点击会跳转到百度，但是我们要默认行为去掉
<input type="button" value="测试1" id="mytest1" onclick="test1()">
<button type="button" id="mytest2"><b>测试2</b></button>
<script type="text/javascript">
	document.getElementById("mytest2").onclick = test2; //这个指令要放在按钮后面，否则会报onclick of null，没在方法里面，被先解析了，找不到这个id，所以报错。
</script>

//js代码
function test1() {
	alert("绑定HTML元素属性");
}

function test2() {
	alert("绑定DOM对象属性");
}

2.非通用性的事件监听方法(一般要实现夸浏览器都不会使用这两个方法)
IE中的事件监听方法:

[object].attachEvent("事件类型","处理函数");//添加监听
[object].detachEvent("事件类型","处理函数");//取消监听

例子:

//HTML代码
<input type="button" value="测试1" id="test1">//点击弹出一句话
<button type="button" id="test2"><b>测试2</b></button>//解除第一个按钮的监听事件


//js代码
function show() {
	alert("test1");
}
window.onload = function() { //这句话的意思是当整个HTML加载完毕之后才会触发这个事件
	document.getElementById("test1").attachEvent("onclick", show); //这个	attachEvent方法只适用于IE浏览器，用其他浏览器不能用
	document.getElementById("test2").onclick = function() {
		document.getElementById("test1").detachEvent("onclick", show);
	}
}

标准DOM中的事件监听方法(在IE浏览器不能用):

//第三个参数为false时是冒泡事件，为true时是捕获事件
[object].addEventListener("事件类型", "处理函数", "冒泡事件或捕获事件"); //添加监听
[object].removeEventListener("事件类型", "处理函数", "冒泡事件或捕获事件"); //取消监听

例子:

//HTML代码
<input type="button" value="测试1" id="test1">
<button type="button" id="test2"><b>测试2</b></button>

//js代码

function show() {
	alert("测试");
}
window.onload = function() {
	var test1 = document.getElementById("test1");
	var test2 = document.getElementById("test2");
	test1.addEventListener("click", show, false); //DOM跟别的不一样，不需要加on
	// test2.οnclick=function(){//第一种写法
	//     test1.removeEventListener("click", show, false);
	// }
//第二种写法
	test2.addEventListener("click", function() {
		test1.removeEventListener("click", show, false);
	}, false);
}

提示:IE监听方法中的事件类型和标准版DOM监听方法中的事件类型写法有点同，前者事件类型"on"开头,比如:“onclick”,“onmousemove"等。而后者不需要去掉"on”,就是"click","mousemove"等。

什么是事件流

冒泡排序：

//冒泡排序，从内而外往上冒
        //js代码
function show(test) {
var Odiv = document.getElementById("display");
Odiv.innerHTML += test;
}

//HTML代码

<body id="test" onclick="show('body<br/>')">
    <div onclick="show('div<br/>')">
        <p onclick="show('p<br/>')">click me</p>
    </div>
    <div id="display"></div>
</body>

效果图
在这里插入图片描述

捕获型事件:

//捕获事件，从外而内
//js代码
function show(test) {
	var Odiv = document.getElementById("display");
	Odiv.innerHTML += test;
}
window.onload = function() {
	var mybody = document.getElementById("mybody");
	var mydiv = document.getElementById("mydiv");
	var myp = document.getElementById("myp");
	mybody.addEventListener("click", function() {
		show("body<br/>")
	}, true);
	mydiv.addEventListener("click", function() {
		show("div<br/>")
	}, true);
	myp.addEventListener("click", function() {
		show("p<br/>")
	}, true);
}


//HTML代码
<body id="mybody">
    <div id="mydiv">
        <p id="myp">click me</p>
    </div>
    <div id="display"></div>
</body>

效果图：
在这里插入图片描述
二.事件概念和事件监听

访问事件的对象:

事件对象分装了时间发生的详细信息，尤其是鼠标、键盘事件。如鼠标事件发生的位置、键盘事件的键盘键等。

IE中的事件对象:
IE中的事件对象是一个隐式可用的全局对象：event，它是window对象的一个属性.

//IE中得到事件对象
op.onclick = function() {
	var oEvent = window.event;
}

标准DOM中的事件对象:
在标准DOM浏览器检测到发生了某个事件时，将自动创建一个Event对象，并隐式地将该对象作为事件处理函数的第一个参数传入。

//标准DOM中得到事件对象
op.onclick=function(oEvent){
	//作为参数传进来
}

敲重点: 为了兼容不同的浏览器，通常采用下面的方法得到事件对象。

 op.onclick = function(oEvent) {//如果是IE浏览器的话，一开始oEvent不接收任何对象
	if (window.event) {//当存在event对象的时候，如果是标准DOM浏览器的话，这个会返回false，哲这句判断不会成立.
		oEvent = window.event;//把window.event对象赋值给oEvent 
	}
}

Event事件对象常用属性:

IE	标准DOM	描述
altKey,shiftKey,ctrlKey	同IE	按下alt、shift、ctrl为true，否则为false
cancelBubble	stopPropagation	可用来阻止事件冒泡
button	同IE	对应按下鼠标键的值
clientX,clientY	同IE	鼠标指针在客户区域的坐标，不包括工具栏等
screenX,screenY	同IE	鼠标指针相对于整个计算机屏幕的坐标值
keyCode	同IE	按键的代号
returnValue	同IE	设置false时取消元素的默认事件
srcElement	target	引起事件的元素/对象
type	同IE	事件的名称

案例:
1.得到事件元的标签名

//js代码
function handle(oEvent) {
	if (window.event) {
		oEvent = window.event;
	}
	var oTarget;
	if (oEvent.scrElement) { //判断是IE浏览器还是标准DOM浏览器
		oTarget = oEvent.scrElement; //是IE浏览器则赋值
	} else { //否则是标准DOM浏览器，执行下面语句
		oTarget = oEvent.target;
	}
	alert(oTarget.tagName);
}
window.onload = function() {
	var oImg = document.getElementsByTagName("img")[0];
	oImg.onclick = handle;
}


//HTML代码
<img src="fy.jpg" border="0">

常用的鼠标事件:

事件	用途
onclick	单击鼠标左键触发
ondblclick	双击鼠标左键触发
onmousedowm	单击任意一个鼠标按键时触发
onmouseout	鼠标指针移出一个元素边界时触发
onmousemove	鼠标在某个元素上移动时持续触发
onmouseup	松开鼠标任意一个按钮时触发
onmouseover	鼠标指针移到一个元素上时触发

例子：

//js代码
function handle(oEvent) {
	if (window.event) { //处理兼容性，获得事件对象
		oEvent = window.event;
	}
	var oDiv = document.getElementById("display");
	oDiv.innerHTML += oEvent.type + "<br/>" //输出事件名称
}
window.onload = function() {
	var oImg = document.getElementsByTagName("img")[0];
	oImg.onmousedown = handle; //将鼠标事件除了moussemove外都监听
	oImg.onmouseup = handle;
	oImg.onmouseover = handle;
	oImg.onmouseout = handle;
	oImg.onclick = handle;
	oImg.ondblclick = handle;
}



//HTML代码
<img src="fy.jpg" border="0" style="float:left;padding: 0px 8px 0px 0px;">
<div id="display"></div>

常用的键盘事件:

事件	用途
onkeydown	按下键盘上某个按键时触发，一直按下会持续触发
onkeyup	释放某个按键时触发
onkeypress	按下某个按键并产生字符时触发，忽略shift等功能键

例子:

//js代码
function handle(oEvent) { //处理兼容性，获得事件对象
	if (window.event) {
		oEvent = window.event;
	}
	var oDiv = document.getElementById("display");
	oDiv.innerHTML += oEvent.type + "&nbsp;&nbsp"; //输出事件名称
}
window.onload = function() {
	var oTestArea = document.getElementsByTagName("textarea")[0];
	oTestArea.onkeydown = handle; //监听所有键盘事件
	oTestArea.onkeyup = handle;
	oTestArea.onkeypress = handle;
}


//HTML代码
<textarea cols="50" rows="4"></textarea>
<div id="display"></div>

HTML事件:

事件	用途
onload	页面完全加载后在window对象上触发
onunload	页面完全卸载后在window对象上触发
onselect	选择了文本框的一个或多个字符时触发
onchange	文本框失去焦点时，并且在它获取焦点后内容发生过改变时触发
onsubmit	单击"提交"按钮时在表单form上触发
onfocus	任何元素或窗口获得焦点时触发
onblur	任何元素或窗口失去焦点时触发

敲重点：载入事件onload是最常用的事件之一，因为在页面载入完成之前，DOM的框架还没有搭建完毕，因此任何相关操作都不能发生。给window对象分配onload、onunload事件等同于< body>元素的onload、onunload方法。

例子:

<form action="https://www.baidu.com/" onsubmit="alert('提交啦')">
	<input type="text" value="a" onfocus="alert('获得焦点')" onblur="alert('失去焦点')"> //改变文本框内容在失去焦点时触发,选中（双击）则弹出
	<input type="text" value="b" onchange="alert('内容改变了')" onselect="alert('内容选中啦')">
	<select name="city" onchange="alert('选项改变了')">
	<option value="">上海</option>
	<option value="">北京</option>
	</select><br/>
	<input type="submit" value="提交">
</form>

Diamonds、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript事件

事件概念:JavaScript使我们有能力创建动态页面,网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。我们可以认为事件是可以被JavaSctipt侦测到的一种行为。事件流:事件主要分为冒泡事件和捕获型事件。IE浏览器目前只支持冒泡型事件，而支持标准DOM的浏览器比如火狐，chrome等两者都支持。使用返回值改变HTML元素的默认行为:HTML元素大都包含了自己的...
复制链接

扫一扫

专栏目录