源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Javascript基础知识(二)事件

  • 时间:2020-10-02 05:49 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Javascript基础知识(二)事件
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:导致事件发生的元素; [b]DOM中event对象常用的属性方法:[/b] 1.clientX; 2.clientY; 3.pageX;鼠标指针相对于页面的X坐标; 4.pageY;鼠标指针相对于页面的Y坐标; 5.StopPropagation:调用该方法可以阻止事件的进一步传播(冒泡); 6.target:触发的事件元素/对象; 7.type:事件的名称; [b]两种event对象的相同点和不同点[/b]: 相同点: 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 [b]事件类型:[/b] [b]一.鼠标事件:[/b] onmouseover:当鼠标移入时; onmouseout:当鼠标移出时; onmousedown:当按下鼠标时; onmouseup:当抬起鼠标时; onclick:点击鼠标左键时; ondblclick:双击鼠标左键时; [b]二.键盘事件:[/b] onkeydown:当用户在键盘上按下一个键时发生; onkeyup:当用户释放一个按下的键时发生; keypress:当用户一直按着键不放时; [b]三.HTML事件:[/b] onload:加载页面时; onunload:卸载页面时; abort:当用户终止装载进程之前,如果他还没有被完全转载,发生abort事件 error:javascript发生错误时,产生的事件; select:在一个input或者textarea中,用户选择字符时,触发的select事件 change:在一个input或者textarea中,当它失去焦点,在select中触发change事件 submit:当表单被提交时,触发submit事件; reset:重置 resize:当窗口或框架尺寸调整时触发的事件; scroll:当用户滚动或有滚动条时触发的事件; focus:失去焦点时; blur:获得焦点时; [b]Javascript的事件模型[/b] 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">  //匿名函数
[u]复制代码[/u] 代码如下:
<script>  Var button1=document.getElementById("input1");  button1.onclick=funtion(){  alert('helloword!')  } </script>
3.现代事件书写方式:
[u]复制代码[/u] 代码如下:
<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>
[u]复制代码[/u] 代码如下:
<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>
[u]复制代码[/u] 代码如下:
<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>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部