javascript Step02_event
5188 ワード
Step02_event
->新しい方法!
イベント関数の使用
addEventListener ( “xxx”, function( ){ } )
->関数呼び出し時に関数を渡す(動作を渡す)仕組み
「xxx」:アクティビティ名、クリック、mousedown、mousemove、mouseover、focus、submit、blur、...
function(){}:イベントが発生したときに実行する関数
書式:document。QuerySelector(「要素名」)です。addEventListener(「イベント名」,function(){};
既存のグローバル変数(関数)を使用する場合
let clicked=function(){
alert("버튼을 눌렀네요 ?");
};
document.querySelector("#myBtn").addEventListener("click", function(){
alert("버튼을 눌렀네요 ?");
});
***混同開始
function useFuncを実行します.
再びb();に戻り、つまり、useFuncの関数は実行される値に入ります.
これにより、関数を呼び出すだけでなく、関数を再呼び出すこともできます.
伝達関数->伝達関数の参照値
Step 02 event 2-非常に困難
上のdivで「mousedown」イベントが発生した場合は、divの背景色を黄色に変更してみます.
hint : .style.背景色=色;
上のdivで「mouseup」イベントが発生した場合は、divの背景色を白に変更してみます.
document.querySelector("#myDiv").addEventListener("mousedown", function(){
document.querySelector("#myDiv").style.backgroundColor="yellow";
});
document.querySelector("#myDiv").addEventListener("mouseup", function(){
document.querySelector("#myDiv").style.backgroundColor="white";
});
function(e):イベント関数のパラメータ
出力フォーマット=>x座標:100,y座標:200
document.querySelector("#myDiv").addEventListener("mousemove", function(e){
console.log(e);
let info="x좌표: "+e.offsetX+", y좌표: "+e.offsetY
document.querySelector("#myDiv").innerText=info;
})screenX,screenY:ディスプレイ内の座標
pageX,pageY:Webブラウザでの座標
オフセット量X、オフセット量Y:divにおける座標(最小値)
イベント関数を実行すると、イベント情報を含むオブジェクトが関数パラメータとして関数パラメータに渡されます.
function(e)<-受信関数パラメータを用意し、実行時にオブジェクト(関数をパラメータとしてオブジェクトに渡す関数)
パラメータe,consoleに設定します.log(e)は、Eがコンソールウィンドウで受信したすべてのオブジェクト値を表す
// 이 함수는 함수를 인자로 전달받는 함수다
function useFunc(f){
let obj={name:"김구라", x:100, y:200};
// 함수 안에서는 1)인자로 전달받은 함수를 호출하면서 2)object를 하나 전달한다.
f(obj);
}オブジェクトを受信する準備をする必要があります->新しいパラメータe
パラメータ名は任意に命名でき、just objectが渡すロール
// 2. 위의 함수를 사용하는 사용자 입장에서 생각해 보자
useFunc(function(e){ // e : 함수 호출하면서 전달한 값 f(obj);을 전달받을 매개변수 (새롭게 지정)
console.log("내가 전달한 함수가 사용되네?")
console.log(e);
console.log(e.name);
})
再整理
->正しいかどうかはわかりませんが、整理してから直します.
(を参照)
パラメータ
関数を呼び出すと、任意のデータを関数に渡すことができます.
function printFruit
したがって、printFruitのnameという変数名には、関数を呼び出すときに渡される値が含まれます.
console.log(name); 3.<-このコードは「banana」を出力します.
}
printFruit("banana"); -> 1.関数呼び出し時に文字列「banana」を関数として渡す
先生の例
妹はこの関数です!兄がプログラミングしたもの
functionuseFuncという銀行
支店のマネージャーはあなたを探します:f(obj);
契約:{name:「金九拉」,x:100,y:200}
この契約書は弟(e:弟の左手か右手–いずれにしても弟の心:パラメータ名は私の心)に書かれています.
兄の言うとおりにする(e.name)
Step02_event3
10個のdivでクリックしたdivのinnerTextは「Clicked!」プログラミングしてからに変更してください。
複数のdivがあるため、文を繰り返す必要があります(各イベントが必要です).
重複文は配列に書かれているので配列querySelesstorAll!!
第一の方法
for (let i=0; i<10; i++){
document.querySelectorAll(".box")[i].addEventListener("click", function(){
document.querySelectorAll(".box")[i].innerText="clicked!"
});
}後にiを書くにはiを指定する必要があるからです.
2つ目の方法-イベントが存在するdivの参照値を配列に読み込む
let divs=document.querySelectorAll(".box");
for (let i=0; i<divs.length; i++){
divs[i].addEventListener("click", function(){
this.innerText="clicked!"
});
}
ここでdivs[i](divのi番目の参照値)を指す
+)css要素
.box:hover
-クラス名boxの要素にマウスを置いたときに適用されるcss
+)
同じものを順番に複数作成
div.box{div$}*10そしてタブ!
Reference
この問題について(javascript Step02_event), 我々は、より多くの情報をここで見つけました https://velog.io/@jeongmmmn/javascript-Step02eventテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol