javascript 事件监听是什么?
1、事件监听的定义
创新互联是一家专业提供新郑企业网站建设,专注与成都网站制作、网站设计、H5响应式网站、小程序制作等业务。10年已为新郑众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。
在Javascript中,浏览器一般分为两大类:
① 基于IE内核的浏览器(版本号小于9的IE浏览器)
② 基于W3C内核的浏览器(版本号大于9的IE浏览器、Firefox、Google等浏览器)
1)基本语法:基于IE内核浏览器
dom对象.attachEvent(type,callback,capture) :为元素绑定事件监听程序
参数说明:
type:绑定的事件类型,如onclick、onmouseover、onmouseout
callback:事件的处理程序,通常是一个匿名函数
capture:使用的浏览器模型,冒泡模型与捕获模型,默认IE8以下的浏览器只支持冒泡模型!
2)基本语法:基于W3C内核的事件监听
dom对象.addEventListener(type,callback) :为W3C内核浏览器绑定事件监听
参数说明:
type:绑定事件类型,不带’on’前缀,如click,mouseover,mouseout
callback:事件的处理程序,通常是一个匿名函数
3、总结事件监听的区别
IE内核的监听方式与W3C内核的监听方式:
①方式不同
IE内核的浏览器使用attachEvent进行绑定
W3C内核的浏览器使用addEventListener进行绑定
②参数不同
IE内核浏览器,其绑定方式一共有三个参数type,callback,capture(使用的浏览器模型)
W3C内核浏览器,其绑定方式一共有二个参数,type和callback
③type参数不同
IE内核的浏览器,type是需要添加’on’前缀的,如onclick
W3C内核浏览器,type是不需要添加’on’前缀的,如click
④触发顺序不同
IE内核的浏览器,其事件监听是先绑定后触发,后绑定的先触发
W3C内核的浏览器,其事件监听是先绑定先触发,后绑定的后触发
ios里面怎样监听js的事件
在iOS开发之Objective-C与JavaScript交互操作 中我们可以通过stringByEvaluatingJavaScriptFromString 去实现在obj-C中获取到相关节点属性,添加javascript代码等功能。但是我们如何监听到javascript的响应事件呢。在MAC OS中有效的API去实现,但iPhone没有,但我们有一个技巧途径:
大概思路是:在JavaScript事件响应时,通过设置document.location,这会引发webview的一个delegate方法,从而实现发送通知的效果,即达到监听的目的。
1、在javascript与webView之间定一个协议约定:
myapp:myfunction:myparam1:myparam2
2、在javascript中添加代码:
document.location = "myapp:" + "myfunction:" + param1 + ":" + param2;
3、在webView的delegate方法webView:shouldStartLoadWithRequest:navigationType: 添加
- (BOOL)webView:(UIWebView *)webView2
shouldStartLoadWithRequest:(NSURLRequest *)request
navigationType:(UIWebViewNavigationType)navigationType {
NSString *requestString = [[request URL] absoluteString];
NSArray *components = [requestString componentsSeparatedByString:@":"];
if ([components count] 1
[(NSString *)[components objectAtIndex:0] isEqualToString:@"myapp"]) {
if([(NSString *)[components objectAtIndex:1] isEqualToString:@"myfunction"])
{
NSLog([components objectAtIndex:2]); // param1
NSLog([components objectAtIndex:3]); // param2
// Call your method in Objective-C method using the above...
}
return NO;
}
return YES; // Return YES to make sure regular navigation works as expected.
}
如何在页面中监听javascript事件
比如说一个页面上有什么东西,其中有一个按钮,按钮被点击,我们希望能够知道并做一些操作
这个就叫做按钮的点击事件监听
比如如下代码
按钮元素 有一个onclick事件(就是点击事件)
当点击了 执行函数DoClick
这就是上面的说的监听他的点击事件,并进行操作处理!(至于后台,比如说我点击了按钮,向后台提交一些数据如用户名 密码等)
jsp/html代码:input type="button" id="but" value="测试按钮" onclick="DoClick()"
javascript代码
javascript
function DoClick()
{
alert('点击了按钮!希望对你有帮助!');
}
/javascript
监听主要是辅助你对某个元素的特殊操作
例如:
1.点击图片-- 放大
2.地区选择:下拉列表--联动
...
都是在监听事件中写的
如果对某个元素没有特殊草操作,只是显示,那你就没有必要去考虑他的每个事件
要用面向对象的思想去考虑问题
附上出处链接:
监听js变量方法
在日常工作中我们经常会遇到某个变量依赖另一个变量的问题,但我们有时会像下边这样
当向上面这种情况时,其实我们想的是变量b随着变量a去变化,但事实上并非如此,我们需要去监听变量a,当a发生变化时,我们需要b随之发生变化。这时有一个比较好的处理方法,其实类似于vue的双向数据绑定原理,利用Object.defineProperty(),本身对对象的每个属性进行监听,其实就相当于给对象的每个对象设置一个setter和getter,当对对象进行操作时,我们同时激活相应的函数,在这个情境下,我们可以将本身改变的变量a作为对象中的这样一个属性或者一个属性去承载这个变量,当a发生变化时,我们可以触发set函数,这样我们把依赖a的b的表达式写在set函数中,这样就做到了完美的监听
这样就完成了真正的随之改变,就好像vue的双向绑定原理
JS如何实现方法监听?
监听方法在js中的实现如下:
function addEventListener(string eventFlag, function eventFunc, [bool useCapture=false])
eventFlag : 事件名称,如click、mouseover…
eventFunc: 绑定到事件中执行的动作
useCapture: 指定是否绑定在捕获阶段,true为是,false为否,默认为true
在事件监听流中可以使用event.stopPropagation()来阻止事件继续往下流
IE中使用自有的attachEvent函数绑定时间,函数定义如下:
function attachEvent(string eventFlag, function eventFunc)
eventFlag: 事件名称,但要加上on,如onclick、onmouseover…
eventFunc: 绑定到事件中执行的动作
在事件监听流中可以使用window.event.cacenlBubble=false来阻止事件继续往下流
总结:addEventListener(string eventFlag, function eventFunc, [bool useCapture=false]),针对ff,chrome,safari浏览器,false指冒泡阶段,默认为true,指捕获阶段。不过一般我们都用false。
attachEvent(string eventFlag, function eventFunc),针对ie系列、还有opera浏览器,少了事件处理机制的参数,只指定事件类型(别忘了on)和触发哪个函数。
如何监听JS数组的变化
javascript监听数组变化思路
1、定义变量arrayProto接收Array的prototype
2、定义变量arrayMethods,通过Object.create()方法继承arrayProto
3、重新封装数组中push,pop等常用方法。(这里我们只封装我们需要监听的数组的方法,并不做JavaScript原生Array中原型方法的重写的这么一件暴力的事情)
4、其他js数组变化监听方法
js监听数组变化实现方法
这里我们首先需要确定的一件事情就是,我们只需要监听我们需要监听的数据数组的一个变更,而不是针对原生Array的一个重新封装。
其实代码实现起来会比较简短,这一部分代码我会直接带着注释贴出来
// 获取Array原型const arrayProto = Array.prototype;const arrayMethods = Object.create(arrayProto);const newArrProto = [];
[ 'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method = { // 原生Array的原型方法
let original = arrayMethods[method]; // 将push,pop等方法重新封装并定义在对象newArrProto的属性上
// 这里需要注意的是封装好的方法是定义在newArrProto的属性上而不是其原型属性
// newArrProto.__proto__ 没有改变
newArrProto[method] = function mutator() { console.log('监听到数组的变化啦!'); // 调用对应的原生方法并返回结果(新数组长度)
return original.apply(this, arguments);
}
})let list = [1, 2];// 将我们要监听的数组的原型指针指向上面定义的空数组对象// newArrProto的属性上定义了我们封装好的push,pop等方法list.__proto__ = newArrProto;
list.push(3); // 监听到数组的变化啦! 3// 这里的list2没有被重新定义原型指针,所以这里会正常执行原生Array上的原型方法let list2 = [1, 2];
list2.push(3); // 3
目前为止我们已经实现了数组的监听。从上面我们看出,当我们将需要监听的数组的原型指针指向newArrProto对象上的时候(newArrProto的属性上定义了我们封装好的push,pop等方法)。这样做的好处很明显,不会污染到原生Array上的原型方法。
分享题目:监听javascript,监听音箱和hifi音箱区别
URL网址:http://lswzjz.com/article/dsdgscd.html