js事件

摸鱼1
286 阅读4分钟

js事件可以分为鼠标事件、键盘事件和html事件，事件都由两部分组成，on+事件名称

1.鼠标事件

  • click：单击
  • dblclick：双击
  • mousedown：鼠标按下
  • mouseup：鼠标抬起
  • mouseover：鼠标悬浮
  • mouseout：鼠标离开
  • mousemove：鼠标移动
  • mouseenter：鼠标进入
  • mouseleave：鼠标离开 1.click：单击
 <button onclick="myClick()">鼠标单击</button>
<script>
function myClick() {  
       console.log("你单击了按钮！");  
   }  
</script>

2.dblclick：双击

<button ondblclick="myDBClick()">鼠标双击</button> 
<script> function myDBClick() {  
       console.log("你双击了按钮！");  
   }
</script>

3.mousedown：鼠标按下
4.mouseup：鼠标抬起

<button onmousedown="myMouseDown()" onmouseup="myMouseUp()">鼠标按下和抬起</button>
<script>
 function myMouseDown() {  
       console.log("鼠标按下了！");  
   }  
   function myMouseUp() {  
       console.log("鼠标抬起了！");  
   } 
</script>

5.mouseover：鼠标悬浮
6.mouseout：鼠标离开

<script>
  function myMouseOver() {  
       console.log("鼠标悬浮！");  
   }  
   function myMouseOut() {  
       console.log("鼠标离开！")  
   }  
</script>

7.mousemove：鼠标移动

<script>
function myMouseMove() {  
       console.log("鼠标移动！")  
   }  
   
</script>

8.mouseenter：鼠标进入
9.mouseleave：鼠标离开

<script>
function myMouseEnter() {  
       console.log("鼠标进入！")  
   }  
   function myMouseLeave() {  
       console.log("鼠标离开！")  
   }  
</script>

2.键盘事件

1.keydown：按键按下
2.keyup：按键抬起
3.keypress：按键按下抬起

<input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)"> 
<script>
    function myKeyDown(id) {

console.log(document.getElementById(id).value);

}
function myKeyUp(id) {

var text = document.getElementById(id).value;

document.getElementById(id).value = text.toUpperCase();

}
</script>

html事件

  1. load：文档加载完成
  2. select：被选中的时候
  3. change：内容被改变
  4. focus：得到光标
  5. resize：窗口尺寸变化
  6. scroll：滚动条移动
<body onload="loaded()"> 
<div style="height: 3000px" ></div> 
<input type="text" id="name" onselect="mySelect(this.id)"> 
<input type="text" id="name2" onchange="myChange(this.id)"> 
<input type="text" id="name3" onfocus="myFocus()"> 
</body>
<script> 
window.onload = function () {  
       console.log("文档加载完毕！");  
   };  
   /*window.onunload = function () {  
    alert("文档被关闭！");  
    };*/  
   /*打印选中的文本*/  
   function mySelect(id) {  
       var text = document.getElementById(id).value;  
       console.log(text);  
   }  
   /*内容被改变时*/  
   function myChange(id) {  
       var text = document.getElementById(id).value;  
       console.log(text);  
   }  
   /*得到光标*/  
   function myFocus() {  
       console.log("得到光标！");  
   }  
   /*窗口尺寸变化*/  
window.onresize = function () {  
       console.log("窗口变化！")  
   };  
   /*滚动条移动*/  
window.onscroll = function () {  
       console.log("滚动");  
   }  
</script>

js事件与jQuery事件的区别

1.JavaScript 是通过标签插入到HTML页面，可由所有的现代浏览器执行的一种轻量级的编程语言。

2.JQuery是一个JavaScript函数库。或者说是JavaScript。 使用JQuery首先要在 HTML 代码最前面加上对 jQuery 库的引用，比如：

<script src=``"http://code.jquery.com/jquery-1.6.min.js"``></script>

库文件既可以放在本地，也可以直接使用知名公司的 CDN，好处是这些大公司的 CDN 比较流行，用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了，所以能加快网站的打开速度。另外一个好处是显而易见的，节省了网站的流量带宽
JavaScript是网页编程语言，而jQuery是一个基于js编写的框架；
jquery就是基于JavaScript语言写出来的一个框架,实质上还是js而已所以
1.jQuery 是一个 JavaScript 库；
2.jQuery 极大地简化了 JavaScript 编程；
3.jQuery 使JavaScript更好用；
4.jquery就是要用更少的代码，漂亮的完成更多的功能；

注

JavaScript操作样式的方法只能获取内联样式，不能取内嵌的和外部的。
jQuery操作样式的方法可以是内联的也可以是内嵌的。

事件对象(event)

Event 对象代表事件的状态，当dom tree中某个事件被触发的时候，会同时自动产生一个用来描述事件所有的相关信息（比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。）的对象，这个对象就是event bubbles 返回ture/false 指示事件是否是冒泡事件类型

事件属性

  1. type：事件的类型，如onlick中的click；

  2. srcElement/target：事件源，就是发生事件的元素；

  3. button：声明被按下的鼠标键，整数，1代表左键，2代表右键，4代表中键，如果按下多个键，酒把这些值加起来，所以3就代表左右键同时按下；（firefox中 0代表左键，1代表中间键，2代表右键）

  4. clientX/clientY：事件发生的时候，鼠标相对于浏览器窗口可视文档区域的左上角的位置；(在DOM标准中，这两个属性值都不考虑文档的滚动 情况，也就是说，无论文档滚动到哪里，只要事件发生在窗口左上角，clientX和clientY都是 0，所以在IE中，要想得到事件发生的坐标相对于文档开头的位置，要加上document.body.scrollLeft和 document.body.scrollTop)

  5. offsetX,offsetY/layerX,layerY：事件发生的时候，鼠标相对于源元素左上角的位置；

  6. x,y/pageX,pageY：检索相对于父要素鼠标水平坐标的整数；

  7. altKey,ctrlKey,shiftKey等：返回一个布尔值；

  8. keyCode：返回keydown何keyup事件发生的时候按键的代码，以及keypress 事件的Unicode字符；(firefox2不支持 event.keycode，可以用 event.which替代 )

  9. fromElement,toElement：前者是指代mouseover事件中鼠标移动过的文档元素，后者指代mouseout事件中鼠标移动到的文档元素；

  10. cancelBubble：一个布尔属性，把它设置为true的时候，将停止事件进一步起泡到包容层次的元素；(e.cancelBubble = true; 相当于 e.stopPropagation();)

  11. returnValue：一个布尔属性，设置为false的时候可以组织浏览器执行默认的事件动作；(e.returnValue = false; 相当于 e.preventDefault();)

  12. attachEvent(),detachEvent()/addEventListener(),removeEventListener：为制定 DOM对象事件类型注册多个事件处理函数的方法，它们有两个参数，第一个是事件类型，第二个是事件处理函数。在 attachEvent()事件执行的时候，this关键字指向的是window对象，而不是发生事件的那个元素；

  13. screenX、screenY：鼠标指针相对于显示器左上角的位置，如果你想打开新的窗口，这两个属性很重要；

事件冒泡和事件捕获

html 页面和js的互动是通过事件来完成的，事件捕获是指从document一直到触发事件的那个节点，而事件冒泡则恰恰于此相反。他们就是事件触发时序的术语而已，一个从外到内，一个由内到外。
例如：
事件冒泡

<div id="fu" @click="shiJian('fu')">fu  冒泡
            <div id="zi" @click.stop="shiJian('zi')">zi</div>
</div>

事件捕获

  <div id="fu" @click.capture="shiJian('fu')">fu  捕获
            <div id="zi" @click="shiJian('zi')">zi</div>
  </div>
avatar
文章
阅读
粉丝