vue.js 事件物件

阿新 • • 發佈：2021-02-17

技術標籤：vue.js

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge"> 

	<title></title>
	<script type="text/javascript" src='vue.min.js'></script>
	<style type="text/css">
		body,html{width: 100%;height: 100%;}
	</style>
</head>
<body @click="changed(10,$event)">
	<script type="text/javascript" 
>
		new Vue({
			el:'body',
			methods:{
				changed:function(event,l)
				{
					console.log(event,l);
				}
			}
		});
	</script>
</body>
</html>

解釋：

$event是事件物件.

效果：

在這裡插入圖片描述

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	< 
meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script type="text/javascript" src='vue.min.js'></script>
	<style type="text/css">
		body,html{width: 100%;height: 100%;}
		div{width: 100px;height: 100px;background: black;}
	</style>
</head>
<body @click="bodyEvent">
	<div @click.stop='divEvent'></div>
	<script type="text/javascript">
		new Vue(
			{
				el:'body',
				methods:{
					bodyEvent:function()
					{
						alert("body");
					},
					divEvent:function(event)
					{
						//event.cancelBubble=true;
						//event.stopPropagation();
						alert("div");
					}
				}
			}
		);
	</script>
</body>
</html>

解釋：

在這裡插入圖片描述
與

一樣的效果，都是事件冒泡.
效果：

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <script type="text/javascript" src='vue.min.js'></script>
    <style type="text/css">
    	body,html{width: 100%;height: 100%;}
    	
    </style>
</head>
<body @contextmenu.prevent='bodyEvent'>
	
<script type="text/javascript">
	new Vue({
		el:'body',
		methods:{
			bodyEvent:function(){
				//event.preventDefault();
				alert('我右鍵了！');
			}
		}
	})
</script>
</body>
</html>

解釋：

在這裡插入圖片描述
與

相同。都是阻止預設事件.

效果圖：

在這裡插入圖片描述

vue.js 事件物件

技術標籤：vue.js <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8">

JS——事件物件

什麼是事件物件？ e就是事件物件。事件物件概述：事件發生以後，會產生一個事件物件，作為引數傳給監聽函式。瀏覽器原生提供一個Event物件，所有的事件都是這個物件的例項，或者說繼承了Event.prototype物件。

element js 包含字元_從零開始學前端 34. JS事件物件Event詳解

技術標籤：element js 包含字元element分頁點選事件ie 引用公共jsjs button onclick 傳參js 判斷滑鼠指標形狀js 模擬按鍵

Vue.js — 事件處理

1.事件處理 1.1 監聽事件 <!DOCTYPE html> <html> <head> <meta charset=\"utf-8\">

vue.js click點選事件獲取當前元素物件的操作

Vue.js可以傳遞$event物件 <body id=\"app\"> <ul> <li v-on:click=\"say(\'hello!\',$event)\">點選當前行文字</li>

vue製作拼圖(主要是用js修改sass裡的變數和vue中的event事件物件)

1.在vue中要獲取event事件物件在繫結事件時要利用$event作為引數傳遞。 <template>

從Node.js事件觸發器到Vue自定義事件的深入講解

Node.js中的事件觸發器所引發的思考今天在看 Node.js 文件的時候講到事件觸發器，其中的 emit 方法讓我想到了 Vue 中的自定義事件，藉此我對 Vue 又有了新的理解，所以將我的理解記錄下來，留作學習筆記。

js：事件（註冊、解綁、DOM事件流、事件物件、事件委託）

1、註冊事件（1）傳統方式註冊事件 <body> <button id=\"b1\">請點選</button>

Vue.js 條件渲染、列表渲染、事件處理、表單輸入繫結基本使用

條件渲染、列表渲染、事件處理、表單輸入繫結基本使用條件渲染 v-if 基本用法

Vue.js 之 Promise 物件（七）

一、Promise 概念 Promise 是一個建構函式，new Promise() 可以得到一個 Promise 例項物件，它是一個非同步操作，可以用來執行一些非同步操作（非同步操作不能直接 return 接收執行結果，只能通過回撥來接收）。

vue v-for 點選當前行,獲取當前行資料及event當前事件物件的操作

前言在 v-for 迴圈語句上，定義一個點選事件傳入兩個引數（當行資料、當前事件物件），如下程式碼片段，當前事件物件必須加上 ‘$\' 符號

Vue.js框架：事件處理（三）

一、簡單應用　　1、使用methods定義方法進行呼叫：　　js程式碼： var vm=new Vue({

js點選事件（click）的實現方法和（其他的事件物件）

一、3種實現方式 <!DOCTYPE html> <html lang=\"zh\"> <head> <meta charset=\"UTF-8\">

vue中nextTick的原始碼解讀，分析js事件迴圈機制

程式碼位置 nextTick的實現在src/core/util/next-tick.js中。主要程式碼塊根據當前環境，選擇實現nextTick非同步回撥的途徑。

js 獲取物件中的值及 vue通過引數值取vue物件中的值

技術標籤：jsjsvue var obj = { name: \'js\', age: 20 }; var isSame = (obj["name"] == obj.name)

vue事件獲取事件物件，獲取事件源，獲取當前元素，動態新增樣式

技術標籤：vue.js快跑vuejavascriptes6css3 vue事件獲取事件物件，獲取事件源，獲取當前元素

vue 實現click同時傳入事件物件和自定義引數

僅僅傳入自定義引數 HTML <div id=\"app\"> <button @click=\"tm(123)\">ddddd</button>

一起深入理解js中的事件物件

我們知道在JS中常用的事件有：頁面事件：load；焦點事件：focus，blur；滑鼠事件：click，mouseout，mouseover，mousemove等；

vue.js 鍵盤事件

技術標籤：vue.js <!doctype html> <html> <head> <meta charset="utf-8">

Vue.js前端框架之事件處理小結

1. v-on 事件監聽監聽DOM事件使用 v-on 指令。該指令通常在模板中直接使用，在觸發事件時會執行一些 javascript 程式碼。