时间:2021-05-26
Event对象:(event对象是window对象的属性,当事件发生时,同时产生event对象,事件结束,event对象消失)
IE中:window.event;//获取对象
DOM中:argument[0];//获取对象
IE中Event对象常用的属性方法:
1.clientX:事件发生时,鼠标指针在客户区(不包括工具栏,滚动条等)的X坐标;
2.clientY:事件发生时,鼠标指针在客户区(不包括工具栏,滚动条等)的Y坐标;
3.keyCode:对于keyCode事件,指示按下的键的Unicode字符,对于keydown/keyup事件,指示按下的键盘是数字表示器(获得按键的数值);
4.offsetX:鼠标指针相对于引发事件的对象的X坐标;
5.offsetY:鼠标指针相对于引发事件的对象的Y坐标;
6.srcElement:导致事件发生的元素;
DOM中event对象常用的属性方法:
1.clientX;
2.clientY;
3.pageX;鼠标指针相对于页面的X坐标;
4.pageY;鼠标指针相对于页面的Y坐标;
5.StopPropagation:调用该方法可以阻止事件的进一步传播(冒泡);
6.target:触发的事件元素/对象;
7.type:事件的名称;
两种event对象的相同点和不同点:
相同点:
1.获取事件类型;
2.获取键盘代码(keydown/keyup事件);
3.检测Shift,Alt,Ctrl;
4.获取客户区坐标;
5.获取屏幕坐标;
不同点:
1.获取目标;
//IE:var oTarget=oEvent.srcElement;
//DOM: var oTarget=oEvent.target;
2.获取字符码;
//IE: var iCharCode=oEvent.keyCode;
//DOM: var iCharCode=oEvent.charCode;
3.阻止事件的默认行为;
//IE: oEvent.returnValue=false;
//DOM: oEvent.preventDefault;
4.终止冒泡:
//IE:oEvent.cancelBubble=true;
//DOM:oEvent.stopPropagation
事件类型:
一.鼠标事件:
onmouseover:当鼠标移入时;
onmouseout:当鼠标移出时;
onmousedown:当按下鼠标时;
onmouseup:当抬起鼠标时;
onclick:点击鼠标左键时;
ondblclick:双击鼠标左键时;
二.键盘事件:
onkeydown:当用户在键盘上按下一个键时发生;
onkeyup:当用户释放一个按下的键时发生;
keypress:当用户一直按着键不放时;
三.HTML事件:
onload:加载页面时;
onunload:卸载页面时;
abort:当用户终止装载进程之前,如果他还没有被完全转载,发生abort事件
error:javascript发生错误时,产生的事件;
select:在一个input或者textarea中,用户选择字符时,触发的select事件
change:在一个input或者textarea中,当它失去焦点,在select中触发change事件
submit:当表单被提交时,触发submit事件;
reset:重置
resize:当窗口或框架尺寸调整时触发的事件;
scroll:当用户滚动或有滚动条时触发的事件;
focus:失去焦点时;
blur:获得焦点时;
Javascript的事件模型
1.Javascript事件模型:1.冒泡类型: <input type="button">当用户点击按钮时:input-body-html-document-window(从下往上冒泡)IE浏览器只是用冒泡
2.捕获类型: <input type="button">当用户点击按钮时:window-document-html-body-input (从上往下)
经过ECMA标准化后,其他浏览器都支持两种类型,捕获先发生。
2.传统事件书写的三种方式:
1.<input type="button" onclick="alert('helloworld!')">
2.<input type="button onclick=name1()">======<script>function name1(){alert('helloword!');}</script> //有名函数
3.<input type="button" id="input1"> //匿名函数
复制代码 代码如下:
<script>
Var button1=document.getElementById("input1");
button1.onclick=funtion(){
alert('helloword!')
}
</script>
3.现代事件书写方式:
复制代码 代码如下:
<input type="button" id="input1"> //IE中添加事件
<script>
var fnclick(){
alert("我被点击了")
}
var Oinput=document.getElementById("input1");
Oinput.attachEvent("onclick",fnclick);
--------------------------------------
Oinput.detachEvent("onclick",fnclick);//IE中删除事件
</script>
复制代码 代码如下:
<input type="button" id="input1"> //DOM中添加事件
<script>
var fnclick(){
alert("我被点击了")
}
var Oinput=document.getElementById("input1");
Oinput.addEventListener("onclick",fnclick,true);
--------------------------------------
Oinput.removeEventListener("onclick",fnclick);//DOM中删除事件
</script>
复制代码 代码如下:
<input type="button" id="input1"> //兼容IE和DOM添加事件
<script>
var fnclick1=function(){alert("我被点击了")}
var fnclick2=function(){alert("我被点击了")}
var Oinput=document.getElementById("input1");
if(document.attachEvent){
Oinput.attachEvent("onclick",fnclick1)
Oinput.attachEvent("onclick",fnclick2)
}
else(document.addEventListener){
Oinput.addEventListener("click",fnclick1,true)
Oinput.addEventListener("click",fnclick2,true)
}
</script>
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
如何从无开头学习PHP呢。一、学习PHP最好要具备的基础知识:1)HTML2)CSS3)JavaScript特别是HTML,是必备的基础知识,同时还需了解/Le
适合阅读范围:对JavaScript一无所知~离精通只差一步之遥的人基础知识:HTMLJavaScript就这么回事1:基础知识1创建脚本块1:2:JavaSc
前言说Jquery之前,先来学习一下Javascript(以后简称为JS)语言中的基础知识问题,其时对于每种编程语言来说基础知识都是大同小异的,对变量,函数,条
instanceof:用来判断实例是否是属于某个对象,这个判断依据是什么呢?首先,了解一下javascript中的原型继承的基础知识:javascript中的对
越来越多的人在学习SEO,学习SEO需要了解的基础知识?学习seo首先要了解seo基础知识,先打好基础,掌握好seo基础知识,优化道路才会走得顺畅和稳固。那么新