JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。本文将介绍JS事件相关的基础知识。一、事件流事件流描述的是从页面中接受事件的顺序。事件冒泡事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较...
本篇文章主要介绍了详解JavaScript按概率随机生成事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下最近做了一个JavaScript按概率随机生成事件,于是整理了一下思路,写了一个小demo:/* *在抽奖的活动中经常会用到这个算法,不同奖项的获取概率不同,要按概率去随机生成对应的奖品 * */ function random(arr1, arr2) {var sum = 0,factor = 0,random = Math.random();for(var i = arr2.length - 1; i >= 0; i--) {sum += a...
1.加载DOM在页面加载完毕后,JS用window.onload为DOM元素添加事件,jQuery中,用$(document).ready()为DOM元素添加事件,使用该方法可以在DOM载入就绪时对其进行操作并调用执行它所绑定的函数。 window.onload和$(document).ready()对比 window.onload=function(){}$(document).ready(function(){})执行机制必须等到网页中的所有内容加载完毕后(包括图片)网页中所有DOM结构绘制完毕后...
本篇文章主要介绍了详解JavaScript按概率随机生成事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下最近做了一个JavaScript按概率随机生成事件,于是整理了一下思路,写了一个小demo:/* *在抽奖的活动中经常会用到这个算法,不同奖项的获取概率不同,要按概率去随机生成对应的奖品 * */ function random(arr1, arr2) {var sum = 0,factor = 0,random = Math.random();for(var i = arr2.length - 1; i >= 0; i--) {sum += a...
先上代码window.isflsgrn = false;//ie11以下是否进入全屏标志,true为全屏状态,false为非全屏状态window.ieIsfSceen = false;//ie11是否进入全屏标志,true为全屏状态,false为非全屏状态//跨浏览器返回当前 document 是否进入了可以请求全屏模式的状态function fullscreenEnable(){var isFullscreen = document.fullscreenEnabled ||window.fullScreen ||document.mozFullscreenEnabled ||document.webkitIsFullScreen;return i...
本篇文章主要介绍了详解JavaScript按概率随机生成事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下最近做了一个JavaScript按概率随机生成事件,于是整理了一下思路,写了一个小demo:/* *在抽奖的活动中经常会用到这个算法,不同奖项的获取概率不同,要按概率去随机生成对应的奖品 * */ function random(arr1, arr2) {var sum = 0,factor = 0,random = Math.random();for(var i = arr2.length - 1; i >= 0; i--) {sum += a...
node.js是基于单线程无阻塞异步式的I/O,异步式的I/O指的是当遇到I/O操作的时候,线程不阻塞而是进行下面的操作,那么I/O操作完成之后,线程时如何知道该操作完成的呢?当操作完成耗时的I/O操作之后,会以事件的形式通知I/O操作的线程完成,线程会在特定的时候来处理这个事件,进行下一步的操作,为了完成异步I/O,线程必须有事件循环的机制,不停的坚持是否有没有完成的事件,依次完成这些事件的处理。而对于阻塞式I/O,线程遇到耗...
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。事件流事件流描述的是从页面中接受事件的顺序。事件冒泡事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的结点(文档)。以下面HTML页面...
观察者模式(发布-订阅模式):其定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。 在JavaScript中,一般使用事件模型来替代传统的观察者模式。 好处: (1)可广泛应用于异步编程中,是一种替代传递回调函数的方案。 (2)可取代对象之间硬编码的通知机制,一个对象不用再显示地调用另外一个对象的某个接口。两对象轻松解耦。DOM事件–观察者模式典例需要监控用户点击document.bod...
由于浏览器是无状态的,在这时候捕捉浏览器关闭会出现两种情况: 1.真正的关闭浏览器 (a.点击关闭按钮 b.右击任务栏关闭 c.按alt+F4关闭) 2.刷新浏览器。 那如何判断区分这两种动作呢? Javascript代码处理方法: function window.onbeforeunload() { //用户点击浏览器右上角关闭按钮或是按alt+F4关闭 if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey) { // alert("点关闭按钮"); document.getEl...
跨平台事件什么叫跨平台事件?即在不同的浏览器上执行同一事件,所使用的方法不同。什么是EventUtil对象?有什么作用?即将所有与事件相关的函数,融合在一起的一个容器,方便管理事件对象,它没有属性。主要处理DOM事件和IE事件的磨合,使其尽可能的相似。下面我们来看一下DOM和IE之间的对象属性和方法做个对比(这里只指出两者之间不同的属性和方法),主要有以下五大点:DOM属性和方法 IE属性和方法charcode ke...
关于冒泡中的target和currentTarget target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件的父级。<p id="outer" style="background:#099"> <p>我是目标p</p> ----点击这部分,输出:e.target.tagName : P || e.currentTarget.tagName : p<p id="inner" styl...
先介绍js添加事件通用方法,具体内容如下<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><p id="p1">测试添加事件:firefox使用addEventListener,ie使用attachEvent<br>点击此p标签,绑定了2个弹出事件</p><script>function test1() {alert("test1");}function test2(){alert("test2");}//添加事件通用方法function addEvent(element,e,fn) {//firefox使用addEventListener,来添加事件if(elemen...
普通的定义方式<input type="button" name="Button" value="确定" onclick="Sfont=prompt(请在文本框中输入红色,红色, 提示框 ); if(Sfont==红色){form1.style.fontFamily=黑体;form1.style.color=red; }" />这是最常见的一种定义方式,直接将JS事件定义在需要的对象之上。相关的变形就是调用方法的形式,如下<script>function show(){alert("show");} </script> <input type="button" name="show" onclick="show()"/>第二种<scri...
下面小编就为大家带来一篇JavaScript之事件委托实例(附原生js和jQuery代码)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作。使用事件委托的优点1、操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作dom结构如下:<ul id = "oUl"><li class = "item"></li><li class = "it...