js事件绑定
01js入口函数
<script>
// 原生js的入口函数只有一个 多个还是会读取最后一个入口函数 只执行最后一个入口函数的逻辑
window.οnlοad=function(){
console.log('我是入口函数1')
alert('sdasdasddas')
}
window.οnlοad=function(){
console.log('我是入口函数2')
}
window.οnlοad=function(){
console.log('我是入口函数3')
}
</script>
02事件绑定
1、事件绑定的几种方式
在Javascript中,事件绑定一共有3种方式:
① 行内绑定
② 动态绑定
③ 事件监听
事件绑定
IE方式
attachEvent(事件名称, 函数),绑定事件处理函数
detachEvent(事件名称, 函数),解除绑定
DOM方式
addEventListener(事件名称,函数, 捕获)
removeEventListener(事件名称, 函数, 捕获)
<script>
window.onload = function () {
var oBtn = document.getElementById('btn1');
//传统的添加事件 如果添加的是相同的多个事件 它只会执行最后一个
// oBtn.οnclick=function(){
// alert('a');
// }
// oBtn.οnclick=function(){
// alert('b');
// }
// attachEvent(事件名称, 函数),绑定事件处理函数
//IE低版本 事件绑定
// oBtn.attachEvent('onclick',function(){
// alert('a');
// })
// oBtn.attachEvent('onclick',function(){
// alert('b');
// })
// DOM方式 解决高版本浏览器的兼容
// addEventListener(事件名称,函数, 捕获)
// oBtn.addEventListener('click',function () {
// alert('a');
// },false);
// oBtn.addEventListener('click',function () {
// alert('bbbb')
// },false)
}
</script>
03事件绑定兼容处理
<script>
window.onload = function () {
var oBtn = document.getElementById('btn1');
//传统的添加事件 如果添加的是相同的多个事件 它只会执行最后一个
// oBtn.οnclick=function(){
// alert('a');
// }
// oBtn.οnclick=function(){
// alert('b');
// }
// attachEvent(事件名称, 函数),绑定事件处理函数
//IE低版本 事件绑定
// oBtn.attachEvent('onclick',function(){
// alert('a');
// })
// oBtn.attachEvent('onclick',function(){
// alert('b');
// })
// DOM方式 解决高版本浏览器的兼容
// addEventListener(事件名称,函数, 捕获)
// oBtn.addEventListener('click',function () {
// alert('a');
// },false);
// oBtn.addEventListener('click',function () {
// alert('bbbb')
// },false)
if (oBtn.attachEvent) {
oBtn.attachEvent('onclick', function () {
alert('a');
});
oBtn.attachEvent('onclick', function () {
alert('b');
});
} else {
oBtn.addEventListener('click', function () {
alert('aaa');
}, false);
oBtn.addEventListener('click', function () {
alert('bbbb');
}, false);
}
}
</script>
04事件绑定的封装
<script>
//事件绑定兼容性封装
function myaddEvent(obj,ev,fn) {
if(obj.attachEvent){
obj.attachEvent('on'+ev,fn)
}else{
obj.addEventListener(ev,fn,false);
}
}
window.οnlοad=function(){
var oBtn=document.getElementById('btn1');
myaddEvent(oBtn,'click',function () {
alert('aaaa')
})
myaddEvent(oBtn,'click',function () {
alert('bbbbb')
})
}
</script>
05删除事件绑定
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
// removeEventListener() 方法用于移除由 addEventListener() 方法添加的事件句柄。
// 注意: 如果要移除事件句柄,addEventListener() 的执行函数必须使用外部函数,如上实例所示 (myFunction)。
// 匿名函数,类似 "document.removeEventListener("event", function(){ myScript });" 该事件是无法移除的。
//eg:
// btn3.addEventListener('click',function(){alert("this.value");},false); //添加事件有效
// btn3.removeEventListener('click',function(){alert("this.value");},false); //删除事件无效
// 解决方法
// btn3.addEventListener('click',function(){alert("this.value");},false);
// btn3.removeEventListener('click',function(){alert("this.value");},false);
// 这两行代码中的function(){alert(alert("this.value"));}看上去是同一个东西,实际上是不同的对象,而removeEventListener要求函数必须一样。
// 所以addEventListener最好还是用将匿名函数赋值给某个变量
// addEventListener('click',showValue,false);
// removeEventListener('click',showValue,false);
</script>
06删除事件绑定兼容处理
<script>
var x = document.getElementById("myDIV");
if (x.addEventListener) {
x.addEventListener("mousemove", myFunction);
} else if (x.attachEvent) {
x.attachEvent("onmousemove", myFunction);
}
function myFunction() {
document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
if (x.removeEventListener) {
x.removeEventListener("mousemove", myFunction);
} else if (x.detachEvent) {
x.detachEvent("onmousemove", myFunction);
}
}
</script>
正则表达式
01search()
search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。(查找)
<script>
var str='dasdadadeeefrtg';
alert(str.search('z'))
//search 要是找得到的 返回的是字符的index index是从0开始的 要是没有的话就返回-1
</script>
02substring
substring() 方法用于提取字符串中介于两个指定下标之间的字符。(获取子字符串)
<script>
var str='abcdefg';
// alert(str.substring(1)); bcdefg 就是从下标为1开始一直获取到最后
// alert(str.substring(2,5)); cde
// 起始 结束 不包括结束位置
</script>
03charAt
charAt() 方法可返回指定位置的字符。 (获取某个字符)
请注意,JavaScript 并没有一种有别于字符串类型的字符数据类型,所以返回的字符是长度为 1 的字符串。
<script>
var str='abcdefg';
alert(str.charAt(2));
//charAt(index) 这个方法能够通过下标拿到字符串里面的具体字符 下标从0开始
</script>
04split
split()方法用于把一个字符串分割成字符串数组。(分割字符串,获得数组)
<script>
var str='12-34-56-78';
var arr=str.split('-');
alert(arr);
// console.log(arr);
</script>
05找出字符串中的所有数字
<script>
var str = '12 fff 87 er333 -=-=fa80'
var arr = [];
var tmp = '';
for (var i = 0; i <= str.length; i++) {
if (str.charAt(i) >= '0' && str.charAt(i) <= '9') {
tmp += str.charAt(i);
} else {
if (tmp) {
arr.push(tmp);
tmp = ''//避免重复添加进来
}
}
}
console.log(arr);
</script>
06找出字符串中的所有数字02
<script>
var str = '12 fff 87 er333 -=-=fa80'
console.log(str.match(/\d+/g));
</script>
07第一个正则表达式
什么叫“正则”
规则、模式
强大的字符串匹配工具
是一种正常人类很难读懂的文字
RegExp对象
JS风格——new RegExp(“a”, “i”)
perl风格——/a/i
<script>
var str='abcdefg';
var re=new RegExp('B','i') //i 忽略大小写 ignore
alert(str.search(re));
</script>
08第一个正则表达式02
<script>
var str='abcdefg';
// var re=/A/i //i 忽略大小写 ignore
alert(str.search(/A/i));
</script>
09正则
<script>
var str='asdf 03 23 dasdsadsda';
// alert(str.search(/\d/));
alert(str.match(/[0-9]+/g));
// \d 数字 [0-9] 全局匹配:g——global
</script>
10match
match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。
该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。
<script>
var str='asdf 43 566 csc33';
var re=/\d/g;
alert(str.match(re));
//计算机非常懒 他只会帮你找到第一个数字
</script>
11match
<script>
var str='asdf 43 5666 csc33';
var re=/\d+/g; //+ 量词
alert(str.match(re));
//计算机非常懒 他只会帮你找到第一个数字
</script>
12replace
replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
<script>
//你不是用正则的情况下 只替换第一个
// var str='abc aaa erw';
// alert(str.replace('a','0'));
var str='sdafrgrggafdfdsafdsfsdaaa'
var re=/g/g;
alert(str.replace(re,'0'))
</script>
13敏感词过滤
<textarea id="txt1" cols="50" rows="20"></textarea>
<input type="button" value="过滤" id="btn1">
<textarea id="txt2" cols="50" rows="20"></textarea>
<script>
window.οnlοad=function(){
var oTxt1=document.getElementById('txt1');
var oTxt2=document.getElementById('txt2');
var oBtn=document.getElementById('btn1');
oBtn.οnclick=function(){
var re=/广州|百度|淘宝/g
oTxt2.value=oTxt1.value.replace(re,'*')
}
}
</script>
14方括号
<script>
var str='apc xpc ppc bpc spc tpc cpc';
// var re=/[apc]pc/g []或的意思
alert(str.match(re));
</script>
15过滤html标签
<script>
window.οnlοad=function(){
var oTxt1=document.getElementById('txt1');
var oTxt2=document.getElementById('txt2');
var oBtn=document.getElementById('btn1');
oBtn.οnclick=function(){
// var re=/[^<>]+/g <><>
var re=/<[^<>]+>/g //^除了什么以外 过滤html标签
oTxt2.value=oTxt1.value.replace(re,'');
}
}
</script>
16邮箱验证
<input type="text" id="txt1">
<input type="button" value="校验" id="btn1">
<script>
window.οnlοad=function(){
var oTxt=document.getElementById('txt1');
var oBtn=document.getElementById('btn1');
oBtn.οnclick=function(){
//忽略大小写
// var re=/^\w+@[a-z0-9]+\.[a-z]+$/i;
var re=/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/i
if(re.test(oTxt.value)){
alert('合法邮箱')
}else{
alert('你Ya写错了')
}
}
}
</script>