JQ或者JS循环 onclick事件 求大神指点 代码如下
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQ或者JS循环 onclick事件 求大神指点 代码如下相关的知识，希望对你有一定的参考价值。
<script>
function chgB()
if( document.getElementById("aaa").className=="bbb")
document.getElementById("aaa").className="class"
else
document.getElementById("aaa").className="bbb";
</script>
</head>
<body>
<div class="cont">
<div class="bbb" id="aaa"><a href="#" onclick="chgB()">F1</a></div>
<div class="bbb" id="aaa"><a href="#" onclick="chgB()">F1</a></div>
</div>
目前只能实现一个DIV点击变化样式，希望第二个DIV也能点击 不想写太多的JS不想写死，求大神指点
function chgB(odiv)
if( odiv.className=="bbb")
odiv.className="class"
else
odiv.className="bbb";
</script>
</head>
<body>
<div class="cont">
<div class="bbb" id="aaa"><a href="#" onclick="chgB(this)">F1</a></div>
<div class="bbb" id="aaa"><a href="#" onclick="chgB(this)">F1</a></div>
</div>追问
谢谢你
参考技术B 修改后的代码如下：<script>
function chgB(obj)
if( obj.className=="bbb")
obj.className="class"
else
obj.className="bbb";
</script>
</head>
<body>
<div class="cont">
<div class="bbb" id="aaa"><a href="#" onclick="chgB(this.parentNode)">F1</a></div>
<div class="bbb" id="aaa"><a href="#" onclick="chgB(this.parentNode)">F1</a></div>
</div>本回答被提问者采纳
JS事件绑定和JQ的事件绑定的几种方式
JS事件绑定的方式：
1、内嵌法：
<input type="button" onclick="test()" value="click me"/>
或者是多事件绑定：<input type="button" onclick="javascript:test();test1();" value="click me"/>
2、动态绑定
直接为对象赋值
document.getElementById("xxx").onclick = test;
2.使用两个JS函数attachEvent和addEventlistener
在IE下可用attachEvent，在FF下则要用addEventListener
attachEvent()有两个参数
- 第一个是事件名称
- 第二个是需执行的函数；
addEventListener()有三个参数
- 第一个是事件名称，但与IE事件不同的是，事件不带"on",比如"onsubmit"在这里应为"submit"
- 第二个是需执行的函数
- 第三个参数为布尔值，表示该事件的响应顺序(useCapture)，userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式。
- <html>
- <head>
- <script type="text/javascript">
- function addEventHandler(oTarget, sEventType, fnHandler) {
- if (oTarget.addEventListener) {
- oTarget.addEventListener(sEventType, fnHandler, false);
- } else if (oTarget.attachEvent) {
- oTarget.attachEvent("on" + sEventType, fnHandler);
- } else {
- oTarget["on" + sEventType] = fnHandler;
- }
- }
- function test(){
- alert("bang");
- }
- function test1(){
- alert("bang2");
- }
- function init(){
- var input = document.createElement(‘input‘);
- input.type = ‘button‘;
- input.value = ‘click me‘;
- addEventHandler(input,‘click‘,test);
- addEventHandler(input,‘click‘,test1);
- document.getElementById(‘button_container‘).appendChild(input);
- }
- </script>
- </head>
- <body onload="init()">
- <div id="button_container"></div>
- </body>
- </html>
一个好的addEvent()方法应当达到哪些要求：
a、支持同一元素的同一事件句柄可以绑定多个监听函数；
b、如果在同一元素的同一事件句柄上多次注册同一函数，那么第一次注册后的所有注册都被忽略；
c、函数体内的this指向的应当是正在处理事件的节点（如当前正在运行事件句柄的节点）；
d、监听函数的执行顺序应当是按照绑定的顺序执行；
e、在函数体内不用使用 event = event || window.event; 来标准化Event对象；
- Array.prototype.indexOf = function( obj ){
- var result = -1 , length = this.length , i=length - 1;
- for ( ; i>=0 ; i-- ) {
- if ( this[i] == obj ) {
- result = i;
- break;
- }
- }
- return result;
- }
- Array.prototype.contains = function( obj ) {
- return ( this.indexOf( obj ) >=0 )
- }
- Array.prototype.append = function( obj , nodup ) {
- if ( !(nodup && this.contains( obj )) ) {
- this[this.length] = obj;
- }
- }
- Array.prototype.remove = function( obj ) {
- var index = this.indexOf( obj );
- if ( !index ) return ;
- return this.splice( index , 1);
- };
- function addEvent(element , type , fun){
- if (!element.events) element.events = {};
- var handlers = element.events[type];
- if (!handlers) {
- handlers = element.events[type] = [];
- if(element[‘on‘ + type]) {
- handlers[0] = element[‘on‘ + type];
- }
- }
- handlers.append( fun , true)
- element[‘on‘ + type] = handleEvent;
- }
- function removeEvent(element , type , fun) {
- if (element.events && element.events[type]) {
- element.events[type].remove(fun);
- }
- }
- function handleEvent(event) {
- var returnValue = true , i=0;
- event = event || fixEvent(window.event);
- var handlers = this.events[event.type] , length = handlers.length;
- for ( ; i < length ; i++) {
- if ( handlers[i].call( this , event) === false ){
- returnValue = false;
- }
- }
- return returnValue;
- }
- function fixEvent(event) {
- event.preventDefault = fixEvent.preventDefault;
- event.stopPropagation = fixEvent.stopPropagation;
- return event;
- }
- fixEvent.preventDefault = function() {
- this.returnValue = false;
- };
- fixEvent.stopPropagation = function() {
- this.cancelBubble = true;
- };
JQ中绑定事件的方式：
以click事件为例，jQuery中绑定事件有三种方法：
（1）target.click(function(){});
（2）target.bind("click",function(){});
（3）target.live("click",function(){});
bind方法只能给当前存在的元素绑定事件，live方法对于事后采用JS等方式新生成的元素绑定事件；
1、事件的处理方式上一致，只能触发一次，且不会绑定在不存在dom树中的对象的事件绑定方法有：
bind() one() [one()方法只执行一次，以后不会在执行]
2、事件处理方式一致，有继承性，且能绑定在不存在dom树中的对象的事件绑定方法有：
live() delegate()
Delegate()和其他三种的写法上不一样，其他的可以直接是$(selector).bind()、$(selector).one()、$(selector).live()。但delegate()是这样的：$(parsent selector).delegate(‘selector’,’event’,’function’)
二、jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off；
on方法的真实面目：on(type,[selector],[data],fn) 实际使用：$(‘#myol li‘).on(‘click‘,getHtml); 不过官方有一个推荐就是尽量使用on，因为其他方法都是内部调用on来完成的，直接使用on可以提高效率，而且你完全可以用on来代替其他三种写法。
以上是关于JQ或者JS循环 onclick事件 求大神指点 代码如下的主要内容，如果未能解决你的问题，请参考以下文章
jquery 怎么判断是不是点击手机上的返回键？求大神指点！