WeChat小程序基础篇-js事件

2023-04-22 14:42:02JavaScript019

WeChat小程序基础篇-js事件,第1张

js负责页面与用户的交互，动态修改页面的内容。使用js脚本来处理用户的操作。

操作解释: 点击button按钮(点我),修改界面的msg显示为"BeiJing佩奇"

绑定事件: bindtap定义了"点击事件"

j s 函数: Page({定义函数对应bindtap})

例如开头示例一样，组件绑定事件，js编写事件函数。

这里大概介绍下log打印的内容

☞ 小生不才，附上博客地址☜

事件分为冒泡事件和非冒泡事件

1.冒泡事件:当一个组件被触发后，该事件以此向父节点传递。

2.非冒泡事件:当一个组件触发后，该事件不会向父节点传递。

解释：当点击子节点时，会依次触发"bind事件2，bind事件1"

解释：当点击子节点时，只触发"bind事件2"，而没有触发"bind事件1"

自基础班1.5.0起，触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前。事件到达节点的顺序与冒泡相反。捕获事件采用的关键字为capture-bind、capture-catch，当然catch还是中断，取消冒泡阶段。

1. 示例1，执行顺序为hand2,hand4,hand3,hand1

2. 示例2，加入capture-catch捕获事件，只执行hand2

首先，事件对象 event 是一个对象，包含着跟事件有关的所有信息，包括触发事件的 dom 以及每种事件的一些特征。当dom操作触发某个事件时，会产生事件对象 event，当事件被触发时产生，事件执行完毕时销毁。

获取鼠标在那个标签上 e.target

2.1. 事件捕获: 当时事件被触发的时候，系统会从 window 开始依次向下遍历，遍历的过程中，遇到没有触发的相同事件便触发。

(window =>document =>html =>body =>祖先元素 =>父元素 =>目标元素)

2.2 事件触发: 直到找到触发这个事件的元素，触发元素绑定的事件方法

2.3 事件冒泡: 触发目标事件之后，然后会一层一层向上遍历，遍历的过程中，遇到没有触发的相同事件便触发。

直到返回 window 结束这整个过程叫做事件流。

事件捕获和事件冒泡同一事件流只能有一个生效，JS中默认执行事件冒泡 (false)。

3.1 Dom 0级

写法： ele.on事件名 = function(){}

特点： js 与 html 完全分离便于封装

缺点:同一个DOM对象同时间只能绑定一个同事件

也就是说一个 dom对象只能执行一个事件处理函数

如果给这个事件绑定了多个事件处理函数, 则执行最后一个事件处理函数

3.2 Dom 2级(事件监听)

写法：

ele.addEventListener("事件类型",事件处理函数,bool)

事件处理函数可以是：匿名函数、命名函数、对象

bool: 布尔值 (只有true 和 false) 不写默认为 false

true：触发事件捕获 false：触发事件冒泡

特点:

1.DOM 2级不会与DOM 0级事件冲突同时存在时两个都执行

2.可以绑定多个事件函数不会起冲突

Dom2级可以删除命名函数事件移除 removeEventListener

注意：事件名中没有 on， on是DOM0级的写法

4.1 鼠标事件

1. 单机事件 click

2. 双击事件 dblclick

3. 右键事件 contextmenu 默认事件：右击打开默认菜单栏

4. 移入事件 mouseenter

5. 移出事件 mouseoutmouseover

6. 移动事件 mouseenter mouseleave

7. 按下事件 mousedown

8. 释放事件 mouseup

9. 滚轮事件 mousewheel e.wheelDelta>0 向上滑 <0 向下滑

4.2 键盘事件

1. 键盘按下事件只要按下就一直触发 keydown 获取键码： e.keyCode

2. 键盘抬起事件keyup

4.3 UI事件(窗口事件)

1. 资源加载完毕 load

2. 窗口大小发生改变 resize

3. 窗口滚动条 scroll

4. 资源加载完毕 error

4.4 表单事件

1. 获取焦点focus

2. 失去焦点blur

3. 正在输入input

4. 内容发生改变 change

1.获取鼠标坐标：

1. 在浏览器的可视窗口的坐标 --- e.clientX / e.clientY

2. 在标签内的坐标 ----- e.offsetX / e.offsetY

3. 在屏幕内的坐标 ----- e.screenX / e. screenY

4. 在文档中内的坐标 -- e.pageX / e.pageY

2. 阻止默认事件：

http://www.jb51.net/article/44123.htm 这篇帖子详细的介绍了javascript的执行顺序希望对你有用望采纳在这贴出帖子内容

1.1

按HTML文档流顺序执行JavaScript代码

首先，读者应该清楚，HTML文档在浏览器中的解析过程是这样的：浏览器是按着文档流从上到下逐步解析页面结构和信息的。JavaScript代码作为嵌入的脚本应该也算做HTML文档的组成部分，所以JavaScript代码在装载时的执行顺序也是根据脚本标签<script>的出现顺序来确定的。例如，浏览下面文档页面，你会看到代码是从上到下逐步被解析的。

复制代码

代码如下:

alert("顶部脚本")

</script>

alert("头部脚本")

</script>

</head>

<body>

alert("页面脚本")

</script>

</body></html>

alert("底部脚本")

</script>

如果通过脚本标签<script>的src属性导入外部JavaScript文件脚本，那么它也将按照其语句出现的顺序来执行，而且执行过程是文档装载的一部分。不会因为是外部JavaScript文件而延期执行。例如，把上面文档中的头部和主体区域的脚本移到外部JavaScript文件中，然后通过src属性导入。继续预览页面文档，你会看到相同的执行顺序。

复制代码

代码如下:

alert("顶部脚本")

</script>

<html>

<head>

</head>

<body>

</body>

</html>

alert("底部脚本")

</script>

1.2 预编译与执行顺序的关系

在Javascript中，function才是Javascript的第一型。当我们写下一段函数时，其实不过是建立了一个function类型的实体。

就像我们可以写成这样的形式一样：

复制代码

代码如下:

functionHello()

{

alert("Hello")

}

Hello()

varHello = function()

{

alert("Hello")

}

Hello()

其实都是一样的。但是当我们对其中的函数进行修改时，会发现很奇怪的问题。

复制代码

代码如下:

<scripttype="text/javascript">

functionHello() {

alert("Hello")

}

Hello()

functionHello() {

alert("Hello World")

}

Hello()

</script>

我们会看到这样的结果：连续输出了两次Hello

World。

而非我们想象中的Hello和Hello World。

这是因为Javascript并非完全的按顺序解释执行，而是在解释之前会对Javascript进行一次“预编译”，在预编译的过程中，会把定义式的函数优先执行，也会把所有var变量创建，默认值为undefined，以提高程序的执行效率。

也就是说上面的一段代码其实被JS引擎预编译为这样的形式：

复制代码

代码如下:

<scripttype="text/javascript">

varHello = function() {

alert("Hello")

}

Hello = function() {

alert("Hello World")

}

Hello()

</script>

我们可以通过上面的代码很清晰地看到，其实函数也是数据，也是变量，我们也可以对“函数“进行赋值（重赋值）。

当然，我们为了防止这样的情况，也可以这样：

复制代码

代码如下:

<scripttype="text/javascript">

functionHello() {

alert("Hello")

}

Hello()

</script>

<scripttype="text/javascript">

functionHello() {

alert("Hello World")

}

Hello()

</script>

这样，程序被分成了两段，JS引擎也就不会把他们放到一起了。

当JavaScript引擎解析脚本时，它会在预编译期对所有声明的变量和函数进行处理。

做如下处理：

在执行前会进行类似“预编译”的操作：首先会创建一个当前执行环境下的活动对象，并将那些用var申明的变量设置为活动对象的属性，但是此时这些变量的赋值都是undefined，并将那些以function定义的函数也添加为活动对象的属性，而且它们的值正是函数的定义。

在解释执行阶段，遇到变量需要解析时，会首先从当前执行环境的活动对象中查找，如果没有找到而且该执行环境的拥有者有prototype属性时则会从prototype链中查找，否则将会按照作用域链查找。遇到var

a = ...这样的语句时会给相应的变量进行赋值（注意：变量的赋值是在解释执行阶段完成的，如果在这之前使用变量，它的值会是undefined）

所以，就会出现当JavaScript解释器执行下面脚本时不会报错：

复制代码

代码如下:

alert(a) //

返回值undefined

var a =1

alert(a) //

返回值1

由于变量声明是在预编译期被处理的，所以在执行期间对于所有代码来说，都是可见的。但是，你也会看到，执行上面代码，提示的值是undefined，而不是1。这是因为，变量初始化过程发生在执行期，而不是预编译期。在执行期，JavaScript解释器是按着代码先后顺序进行解析的，如果在前面代码行中没有为变量赋值，则JavaScript解释器会使用默认值undefined。由于在第二行中为变量a赋值了，所以在第三行代码中会提示变量a的值为1，而不是undefined。

同理，下面示例在函数声明前调用函数也是合法的，并能够被正确解析，所以返回值为1。

复制代码

代码如下:

f()//

调用函数，返回值1

function f(){

alert(1)

}

但是，如果按下面方式定义函数，则JavaScript解释器会提示语法错误。

复制代码

代码如下:

f()//

调用函数，返回语法错误

var f = function(){

alert(1)

}

这是因为，上面示例中定义的函数仅作为值赋值给变量f，所以在预编译期，JavaScript解释器只能够为声明变量f进行处理，而对于变量f的值，只能等到执行期时按顺序进行赋值，自然就会出现语法错误，提示找不到对象f。

再见一些例子：

复制代码

代码如下:

/*在预编译过程中func是window环境下的活动对象中的一个属性，值是一个函数，覆盖了undefined值*/

alert(func)//function func(){alert("hello!")}

var func = "this is a variable"

function func(){

alert("hello!")

}

/*在执行过程中遇到了var重新赋值为"this is a variable"*/

alert(func) //this is a variable

</script>

复制代码

代码如下:

var name = "feng"function func()

{

/*首先，在func环境内先把name赋值为undefined，然后在执行过程中先寻找func环境下的活动对象的name属性，此时之前已经预编译值为undefined，所以输出是undefined，而不是feng*/

alert(name) //undefined var name = "JSF"

alert(name) //JSF

}

func()

alert(name)

//feng

</script>

虽然变量和函数声明可以在文档任意位置，但是良好的习惯应该是在所有JavaScript代码之前声明全局变量和函数，并对变量进行初始化赋值。在函数内部也是先声明变量，然后再引用。

1.3 按块执行JavaScript代码

所谓代码块就是使用<script>标签分隔的代码段。例如，下面两个<script>标签分别代表两个JavaScript代码块。

复制代码

代码如下:

// JavaScript代码块1

var a =1

</script>

// JavaScript代码块2

function f(){

alert(1)

}

</script>

JavaScript解释器在执行脚本时，是按块来执行的。通俗地说，就是浏览器在解析HTML文档流时，如果遇到一个<script>标签，则JavaScript解释器会等到这个代码块都加载完后，先对代码块进行预编译，然后再执行。执行完毕后，浏览器会继续解析下面的HTML文档流，同时JavaScript解释器也准备好处理下一个代码块。

由于JavaScript是按块执行的，所以如果在一个JavaScript块中调用后面块中声明的变量或函数就会提示语法错误。例如，当JavaScript解释器执行下面代码时就会提示语法错误，显示变量a未定义，对象f找不到。

复制代码

代码如下:

// JavaScript代码块1

alert(a)

f()

</script>

// JavaScript代码块2

var a =1

function f(){

alert(1)

}

</script>

虽然说，JavaScript是按块执行的，但是不同块都属于同一个全局作用域，也就是说，块之间的变量和函数是可以共享的。

1.4 借助事件机制改变JavaScript执行顺序

由于JavaScript是按块处理代码，同时又遵循HTML文档流的解析顺序，所以在上面示例中会看到这样的语法错误。但是当文档流加载完毕，如果再次访问就不会出现这样的错误。例如，把访问第2块代码中的变量和函数的代码放在页面初始化事件函数中，就不会出现语法错误了。

复制代码

代码如下:

// JavaScript代码块1

window.onload = function(){// 页面初始化事件处理函数

alert(a)

f()

}

</script>

// JavaScript代码块2

var a =1

function f(){

alert(1)

}

</script>

为了安全起见，我们一般在页面初始化完毕之后才允许JavaScript代码执行，这样可以避免网速对JavaScript执行的影响，同时也避开了HTML文档流对于JavaScript执行的限制。

注意

如果在一个页面中存在多个windows.onload事件处理函数，则只有最后一个才是有效的，为了解决这个问题，可以把所有脚本或调用函数都放在同一个onload事件处理函数中，例如：

复制代码

代码如下:

window.onload = function(){

f1()

f2()

f3()

}

而且通过这种方式可以改变函数的执行顺序，方法是：简单地调整onload事件处理函数中调用函数的排列顺序。

除了页面初始化事件外，我们还可以通过各种交互事件来改变JavaScript代码的执行顺序，如鼠标事件、键盘事件及时钟触发器等方法，详细讲解请参阅第14章的内容。

1.5 JavaScript输出脚本的执行顺序

在JavaScript开发中，经常会使用document对象的write()方法输出JavaScript脚本。那么这些动态输出的脚本是如何执行的呢？例如：

复制代码

代码如下:

document.write('<script

type="text/javascript">')

document.write('f()')

document.write('function f(){')

document.write('alert(1)')

document.write('}')

document.write('</script>')

运行上面代码，我们会发现：document.write()方法先把输出的脚本字符串写入到脚本所在的文档位置，浏览器在解析完document.write()所在文档内容后，继续解析document.write()输出的内容，然后才按顺序解析后面的HTML文档。也就是说，JavaScript脚本输出的代码字符串会在输出后马上被执行。

请注意，使用document.write()方法输出的JavaScript脚本字符串必须放在同时被输出的<script>标签中，否则JavaScript解释器因为不能够识别这些合法的JavaScript代码，而作为普通的字符串显示在页面文档中。例如，下面的代码就会把JavaScript代码显示出来，而不是执行它。

复制代码

代码如下:

document.write('f()')

document.write('function f(){')

document.write('alert(1)')

document.write(')')

但是，通过document.write()方法输出脚本并执行也存在一定的风险，因为不同JavaScript引擎对其执行顺序不同，同时不同浏览器在解析时也会出现Bug。

Ø 问题一，找不到通过document.write()方法导入的外部JavaScript文件中声明的变量或函数。例如，看下面示例代码。

复制代码

代码如下:

document.write('<script

type="text/javascript" src="http://www.jb51.net/test.js">

</script>')

document.write('<script type="text/javascript">')

document.write('alert(n)') // IE提示找不到变量n

document.write('</script>')

alert(n+1) // 所有浏览器都会提示找不到变量n

外部JavaScript文件（test.js）的代码如下：

复制代码

代码如下:

var n =

分别在不同浏览器中进行测试，会发现提示语法错误，找不到变量n。也就是说，如果在JavaScript代码块中访问本代码块中使用document.write()方法输出的脚本中导入的外部JavaScript文件所包含的变量，会显示语法错误。同时，如果在IE浏览器中，不仅在脚本中，而且在输出的脚本中也会提示找不到输出的导入外部JavaScript文件的变量（表述有点长和绕，不懂的读者可以尝试运行上面代码即可明白）。

Ø 问题二，不同JavaScript引擎对输出的外部导入脚本的执行顺序略有不同。例如，看下面示例代码。

复制代码

代码如下:

document.write('<script type="text/javascript"

src="http://shaozhuqing.com/test1.js">

</script>')

document.write('<script type="text/javascript">')

document.write('alert(2)')

document.write('alert(n+2)')

document.write('</script>')

</script>

alert(n+3)