事件监听
1.javascript中的事件监听:(addEventListener)
addEventListener: 用于向指定元素添加事件.例如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | document.getElementById( "inputSwitch" ).addEventListener( "input" , function () { $timeout( function () { if ((/^\d{11}$/.test($scope.searchInfo))) { console.log(1233); $scope.searchState = true ; } else if ((/^(\d{18}|\d{19}|\d{17})$/.test($scope.searchInfo))) { console.log(1237); $scope.searchState = true ; } else { $scope.searchState = false ; } }, 50) }, false ); <input type= "text" placeholder= "输入手机号/身份证号查询" class = "seach_input" style= "width:calc(100% - 300px)" id= "inputSwitch" /> |
上述代码用于监听input值得变化;没当input输入的值发生变化时,都会调用该函数。
element.addEventListener(event, function, useCapture) ;其中第3个参数尚未理解,一般为false;
2.jquery中的事件监听:( bind live delegate on)
其中on监听已渐渐取代其他3种,本文主要讲解on的事件监听。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $( '#inputSwitch' ).on( 'input oninput' , function () { if ((/^\w{11}$/.test($scope.searchInfo))) { console.log(1233); $scope.searchState = true ; } else if ((/^(\w{18}|\w{19}|\w{17})$/.test($scope.searchInfo))) { console.log(1237); $scope.searchState = true ; } else { $scope.searchState = false ; } console.log(1233) });<input type= "text" placeholder= "输入手机号/身份证号查询" class = "seach_input" style= "width:calc(100% - 300px)" id= "inputSwitch" /> |
同样是上面的例子:该方法用于监听input元素中的oniput方法,当input的值发生改变时,处罚监听函数
$(selector).on(event,childSelector,data,function) 其中如需添加只运行一次的事件然后移除,请使用 one()方法;
3.angularJS中的事件监听:( $switch )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $scope.$watch( 'searchInfo' , function (newValue,oldValue){ $timeout( function () { if ((/^\w{11}$/.test(newValue))) { console.log(1233); $scope.searchState = true ; } else if ((/^(\w{18}|\w{19}|\w{17})$/.test(newValue))) { console.log(1237); $scope.searchState = true ; } else { $scope.searchState = false ; } console.log(1233) }, 50) })<input type= "text" placeholder= "输入手机号/身份证号查询" ng-model= "searchInfo" class = "seach_input" style= "width:calc(100% - 300px)" id= "inputSwitch" /> |
同样是上面的例子:该方法用于监听input元素值的变化(即model的变化),当input的值发生改变时,触发该函数。 其中2个参数为:一个为新输入的值,第2个为旧值。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步