js事件使用

事件使用方式

    <div id="app1" onclick="alert('1')">11</div>
    
    <div id="app2" onclick="modify()">22</div>
    //这里要加（），否则不对，  原生要加()
    //下面写成modify(){}形式也不行
    function modify() {
          alert('2')
    }

    <div id="app3">33</div>
    var app3 = document.getElementById('app3')
    app3.onclick = function () {
        alert(3)
    }

    <div id="app4">44</div>
    var app4 = document.getElementById('app4')
    app4.addEventListener('click', function () { alert(4) })

vue这里加不加()都可以，不加参数都可以
 <button @click="btnClick()">提交</button> 可
 <button @click="btnClick">提交</button> 可

有时候子传父，监听子事件的时候，像上面这种，在这个@click="btnClick"中不写括号和参数，照样能在函数中获取到子中传来的参数

参数event

<div id="app">
			<button type="button" @click="handleClick1">按钮</button>  
			<!-- event事件 -->
			<button type="button" @click="handleClick1()">按钮</button>
			<!-- undefined -->
			<button type="button" @click="handleClick1($event)">按钮</button>
			<!-- event事件 -->
			<button type="button" @click="handleClick(2,$event)">按钮</button>
			<!-- 2 event事件 -->
			<button type="button" @click="handleClick($event)">按钮</button>
			<!-- undefined event事件 -->
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {},
				methods: {
					handleClick1(event) {
						// 上面这个event可不写
						console.log(event);
					},
					handleClick(number, event) {
						console.log(number);
						console.log(event);
					}
				}
			})
		</script>

原生事件和父子组件通信时$event用法

在原生事件中表示事件本身。可以通过$event.target获得事件所在的DOM对象，再通过value进一步获取具体的值。

		<div id="app">
			<input type="text" @input="inputHandler($event)" />	
		</div>
		<script>
		var app=new Vue({
			el:'#app',
			methods:{
				inputHandler(e){
					console.log(e) //InputEvent {}
				}
			}
		})

在父子组件通过自定义事件进行通信时，表示从子组件中传递出来的参数值,$event的值就是0.1，而不是前面的事件对象

可以使用 $emit 的第二个参数来提供这个值：
<button v-on:click="$emit('enlarge-text', 0.1)">
  Enlarge text
</button>
然后当在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值：

<blog-post
  ...
  v-on:enlarge-text="postFontSize += $event"
></blog-post>

使用事件抛出一个值

有的时候用一个事件来抛出一个特定的值是非常有用的。例如我们可能想让 <blog-post> 组件决定它的文本要放大多少。这时可以使用 $emit 的第二个参数来提供这个值：

<button v-on:click="$emit('enlarge-text', 0.1)">
  Enlarge text
</button>
然后当在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值：

<blog-post
  ...
  v-on:enlarge-text="postFontSize += $event"
></blog-post>

或者，如果这个事件处理函数是一个方法：

<blog-post
  ...
  v-on:enlarge-text="onEnlargeText"
></blog-post>

那么这个值将会作为第一个参数传入这个方法：

methods: {
  onEnlargeText: function (enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}

事件名大小写

不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如果触发一个 camelCase 名字的事件：

this.$emit('myEvent')

则监听这个名字的 kebab-case 版本是不会有任何效果的：

<!-- 没有效果 -->
<my-component v-on:my-event="doSomething"></my-component>

不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或 property 名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

因此，我们推荐你始终使用 kebab-case 的事件名。

冒泡捕获参数

element.addEventListener(event, function, useCapture)

第一个参数是需要绑定的事件（字符串，指定事件名，不要用on前缀，使用click而不是使用onclick）
第二个参数指定事件触发时执行的函数
第三个参数默认为false，指定事件流为事件冒泡，设为为true时指定为事件捕获。

事件委托

事件委托是利用事件冒泡的原理。
使用情况：当有多个类似的元素需要绑定事件时，一个一个去绑定既浪费时间，又不利于性能，这时候可以使用事件委托，给他们的一个共同父级元素添加一个事件函数去处理所有的事件情况。

<ul id="father">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
</ul>
<script>
   father.addEventListener("click",function(e){
       if(e.target!=father){
           console.log(e.target.innerText)
       }
   });
</script>

//结果
点击哪个li，就输出那个的文字

target和currentTarget

• event.target等于触发事件的事件源对象。
• event.currentTarget等于事件绑定的那个对象， 也就是绑定处理函数内部的this
  参考 https://blog.csdn.net/qq_45149366/article/details/119343049

oninput onchange

oninput事件，在用户输入时触发，它是在元素值发生变化时立即触发；该事件在<input> 或 <textarea> 元素的值发生改变时触发。

• oninput 事件在value值发生变化时就会触发，与onchange的区别是不用等到失去焦点就可以触发了

• onchange 在元素失去焦点，且它的value值发生变化时触发。另一个区别是 onchange 事件也适用于 <select> 元素。

input各种事件

document.getElementById(‘in’).value

1. onfocus 当input 获取到焦点时触发

2. onblur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件，用于判断标签为空。

3. onkeydown 按下按键时的事件触发，

4. onkeyup 当按键抬起的时候触发的事件，在该事件触发之前一定触发了onkeydown事件–相当于一个按键，两个事件

5. onselect 当input里的内容文本被选中后执行，只要选择了就会触发，不是全部选中

6. onclick、oninput和onchange

以上事件可以直接放到input的属性里，例如：<input type=“text” οnfοcus=“a();” οnblur=“b()” οnchange=“c();” οnkeydοwn=“d();” />，

也可以通过js给input dom元素添加相应的事件，如：document.getElementByTagName(‘input’).οnfοcus= function();

mouseenter、mouseleave与mouseover、mouseout

mouseenter、mouseleave（不冒泡）与mouseover、mouseout（会冒泡）都是处理鼠标的移入移出事件，但mouseover、mouseout事件在绑定节点的子节点中也会触发

,mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.但是mouseover就会被它的子元素影响到,在触发子元素的时候,mouseover会冒泡触发它的父元素.(想要阻止mouseover的冒泡事件就用mouseenter)

共同点:当二者都没有子元素时,二者的行为是一致的,但是二者内部都包含子元素时,行为就不同了.

加载事件

原生
window.onload=function(){ 
    alert("页面加载完成！"); 
} 
jquery
$(function(){ 
    alert("页面加载完成！"); 
}); 
$(document).ready(function(){ 
    alert("页面加载完成！"); 
});